尝试使用HTML类填充表单的主题行

huangapple go评论59阅读模式
英文:

Trying to populate a form's subject line with HTML class

问题

我知道有更好的方法来实现这个,但我目前正在尝试使用jQuery来将弹出式电子邮件表单的主题行填充为当前元素的给定类名。我已经成功使它可以正确填充,但它正在倾倒该类别中的所有名称,而我只想获取嵌套在按钮中的特定名称:

var carname = $('.car-name').text();
$('#email-subject').val(carname);

这就是jQuery的代码,如何才能让它只提取特定元素的名称,而不是所有元素的名称呢?

谢谢!

编辑:附加的HTML信息:

<div class="featuredcar">
	<img src="images/cars/1065_00.394180.jpg">
	<div class="featuredinfo">
		<h5 class="car-name">1968 Mustang</h5>
		<p>$10,000</p>
		<p><a href="#feat3" id="feat3">More info...</a></p>
		<p class="contact-p">
			<div class="contact-car">
				<i class="fas fa-envelope"></i>&nbsp;联系我们
			</div>
			about this car!
		</p>
	</div>
</div>

<div id="contact-car-form">
	<span id="close-form"><a href="javascript:void(0)" onclick="closeForm()">&times;</a></span>
	<h2>想了解更多信息?</h2>
	<small>我会尽快回复您</small>
	<form action="#">
		<input placeholder="姓名" type="text" required />
		<input placeholder="电子邮件" type="email" required />
		<input id="email-subject" placeholder="主题" type="text" required />
	</form>
</div>

我需要将

<input id="email-subject" placeholder="主题" type="text" required />

的值填充为

<h5 class="car-name">1968 Mustang</h5>

希望这能消除任何困惑。如果还有其他信息需要提供,请告诉我,感谢您的所有帮助!

英文:

I know there are better ways to do this, but I'm currently trying to use Jquery to populate my pop-up email form's subject line to populate with the given class name of the current element. I've gotten it to the point where it will populate properly, but it is dumping in ALL of the names using that class, when i only want it to pull the specific one in which the button is nested:

var carname = $(&#39;.car-name&#39;).text();
$(&#39;input[id=&quot;email-subject&quot;]&#39;).val(carname);

that is the Jquery of it, how can i get it so it only pulls that specific element's name vs. all of them?

thanks!

EDIT: Additional HTML info:

&lt;div class=&quot;featuredcar&quot;&gt;
 &lt;img src=&quot;images/cars/1065_00.394180.jpg&quot;&gt;
  &lt;div class=&quot;featuredinfo&quot;&gt;
   &lt;h5 class=&quot;car-name&quot;&gt;1968 Mustang&lt;/h5&gt;
   &lt;p&gt;$10,000&lt;/p&gt;
   &lt;p&gt;&lt;a href=&quot;#feat3&quot; id=&quot;feat3&quot;&gt;More info...&lt;/a&gt;&lt;/p&gt;
   &lt;p class=&quot;contact-p&quot;&gt;
    &lt;div class=&quot;contact-car&quot;&gt;
     &lt;i class=&quot;fas fa-envelope&quot;&gt;&lt;/i&gt;&amp;nbsp;Contact Us&lt;/div&gt; about this car!&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

 &lt;div id=&quot;contact-car-form&quot;&gt;
  &lt;span id=&quot;close-form&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;closeForm()&quot;&gt;&amp;times;&lt;/a&gt;&lt;/span&gt;
   &lt;h2&gt;Want more Info?&lt;/h2&gt;
   &lt;small&gt;I&#39;ll get back to you as quickly as possible&lt;/small&gt;
   &lt;form action=&quot;#&quot;&gt;
   &lt;input placeholder=&quot;Name&quot; type=&quot;text&quot; required /&gt;
   &lt;input placeholder=&quot;Email&quot; type=&quot;email&quot; required /&gt;
   &lt;input id=&quot;email-subject&quot; placeholder=&quot;Subject&quot; type=&quot;text&quot; required /&gt;

I need the

input id=&quot;email-subject&quot;

to be populated with the text value from

&lt;h5 class=&quot;car-name&quot;&gt;1968 Mustang&lt;/h5&gt;

hopefully, this clears up any confusion. let me know if there is anything else I can provide and thank you for all of your help!

答案1

得分: 1

这段代码将返回按钮父元素的类名。在我的示例中,类名是'test':

$(“.btn”).on'click'functionevent{
  var carname = $this.parent()。attr'class';
  $'input[id="email-subject"]'.valcarname;
};
<div class="test">
  <button class="btn">Click</button>
</div>
英文:

This code will return the class name of the button's parent element. Which is 'test' in my example:

$(&quot;.btn&quot;).on(&#39;click&#39;, function(event){
  var carname = $(this).parent().attr(&#39;class&#39;);
  $(&#39;input[id=&quot;email-subject&quot;]&#39;).val(carname);
});
&lt;div class=&quot;test&quot;&gt;
  &lt;button class=&quot;btn&quot;&gt;Click&lt;/button&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2020年1月3日 16:09:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/59575117.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定