當存在多個相等的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);
  });

這里的工作示例
小提琴