当存在多个相等的CSS类时，使用jQuery val（）获得正确的值

Question

我有如下代码。

我需要获取已单击的用户whos按钮的名称。 该示例必须修复，因为有几个“ user_name”类，而且我认为jQuery不知道使用val（）可以获取什么值。

我怎样才能解决这个问题？

 $(document).ready(function(){ $(document).on("click", ".btn" , function() { var myuser = $('user_name').val(); }); }); 

 <div id="message_box"> <div> <span class="user_name"> <button class="btn">Click</button> John </span>: <span class="user_message">Hello!</span> </div> <div> <span class="user_name"> <button class="btn">Click</button> Jeff </span>: <span class="user_message">Hi!</span> </div> <div> <span class="user_name"> <button class="btn">Click</button> Jane </span>: <span class="user_message">Whats up?!</span> </div> </div> 

Answer 1

您需要使用遍历方法：

 $(document).ready(function(){ $(document).on("click", ".btn" , function(e) { e.preventDefault(); var myuser = $(this).closest('div').find('.user_name').text(); console.log(myuser); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="message_box"> <div> <button class="btn">Click</button> <span class="user_name">John</span>: <span class="user_message">Hello!</span> </div> <div> <button class="btn">Click</button> <span class="user_name">Jeff</span>: <span class="user_message">Hi!</span> </div> <div> <button class="btn">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span> </div> </div> 

注意如何将按钮移出范围，以便其文本不包含在结果中。 另外，您可以使用输入：

<input class="btn" type="button" value="Click" />

Answer 2

只需按如下所示修改HTML，因为我们可以遍历相关元素并尝试使用this上下文来获取相对于所单击按钮的值，

HTML：

<div id="message_box">
    <div>
        <button class="btn">Click</button><span class="user_name"> John</span>: <span class="user_message">Hello!</span>
    </div>
    <div>
        <button class="btn">Click</button><span class="user_name"> Jeff</span>: <span class="user_message">Hi!</span>
    </div>
    <div>
        <button class="btn">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span>
    </div>
</div>

JS：

$(document).ready(function(){
  $(document).on("click", ".btn" , function() {
    var myuser = $(this).next('.user_name').val();
  });
});

演示

Answer 3

您需要在type="button"上添加type="button"以阻止默认的提交操作，因为没有指定type属性的按钮的类型等于submit 。 val（）方法不适用于非形式元素，例如跨度。

Answer 4

您的jQuery选择器无效。 使用$('.user_name') （它将使用类'user_name'的所有元素）代替$('user_name') 。

PS：最好为这些输入提供一些不同的名称或id属性，并使用相应的jQuery选择器（“ #myId”用于输入id =“ myId”或'[name =“ name1”]]用于输入name =“ name1”）

Answer 5

这是您要完成的示例。

首先，我稍微整理了一下点击功能。 我总是尝试使用最短的方法来达到预期的效果。

其次，您需要在函数内部使用this关键字。 这使您可以访问实际单击的按钮。 从那里，您可以遍历DOM 1级别（ .parent() ），然后找到.text()而不是val() ，从而找到所需的文本。

附带说明一下，您不应在<span>元素内包含<button> <span>元素。

在此示例中，我将名称附加到div只是为了表明它正在工作。

 $(document).ready(function(){ $(".btn").click(function() { var myuser = $(this).parent().text().replace("Click ", ""); $("#message_box").append(myuser); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="message_box"> <div> <span class="user_name"><button class="btn">Click</button> John</span>: <span class="user_message">Hello!</span> </div> <div> <span class="user_name"><button class="btn">Click</button> Jeff</span>: <span class="user_message">Hi!</span> </div> <div> <span class="user_name"><button class="btn">Click</button> Jane</span>: <span class="user_message">Whats up?!</span> </div> </div> 

Answer 6

val（）是用于接收用户输入的元素。 您正在寻找的是text（）;

$（document）.ready（function（）{$（document）.on（“ click”，“ .btn”，function（）{//如果您想访问被单击按钮的父级跨度的属性，使用以下代码$（this）.closest（'span'）。text（）; //如果您要使用user_message类访问下一个span的属性，请使用以下代码$（this）.closest（'span'）。 next（）。text（）;}）;}）;

Answer 7

您的跨度封装了无效的按钮。 我已经使用了HTML-5的数据属性。您可以使用上面回答的任何解决方案，也可以使用数据属性。

<div id="message_box">
    <div>
        <button class="btn" data-user-name="John">Click</button><span class="user_name"> John</span>: <span class="user_message">Hello!</span>

    </div>
    <div>
        <button class="btn" data-user-name="Jeff">Click</button><span class="user_name"> Jeff</span>: <span class="user_message">Hi!</span>

    </div>
    <div>
        <button class="btn" data-user-name="Jane">Click</button> <span class="user_name">Jane</span>: <span class="user_message">Whats up?!</span>

    </div>
</div>

的JavaScript

$(document).ready(function () {
     $(document).on("click", ".btn", function () {
         var myuser = $(this).data("user-name");
         alert(myuser)
     });
 });

演示版

Answer 8

<div id="message_box">
  <div>
    <button class="btn">Click</button>
    <span class="user_name"> John</span>:
    <span class="user_message">Hello!</span>
  </div>
  <div>
    <button class="btn">Click</button>
    <span class="user_name">Jeff</span>:
    <span class="user_message">Hi!</span>
  </div>
  <div>
    <button class="btn">Click</button>
    <span class="user_name"> Jane</span>:
    <span class="user_message">Whats up?!</span>
  </div>
</div>


$(document).on("click", ".btn" , function() {
    //var myuser = $('user_name').val();
    var myuser = $(this).parent().find('.user_name').text();
    alert(myuser);
  });

这里的工作示例
小提琴