jQuery單擊事件爲differents一個標籤相同的類名稱

-1

我試圖使用相同的單擊事件使用計數器添加用戶。我也有不同的a標籤具有相同的類名稱。我正在尋找增加一次就在我點擊的標籤上。謝謝！jQuery單擊事件爲differents一個標籤相同的類名稱

<div class="card"> 
    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div><br><br> 

    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div><br><br> 

    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div> 
</div>

var clicks = 0; 
}; 

$(".sum").on("click", function() { 
    clicks += 1; 
    $(".clicks").html(clicks); 
})

來源

2017-04-25 user3380738

你能張貼您的JS代碼。目前尚不清楚你想在這裏做什麼 –

問題是什麼？ – kecalace

您可以使用$(this)讓你點擊了什麼元素。然後使用$(this).siblings("p").find("a")來獲取我們想要更新的元素。

我希望這是你要找的。

$('.sum').click(function() { 
 
    var count = $(this).siblings("p").find("a").text().split('/'); 
 
    var currentcount = (parseInt(count[0]) + 1); 
 
    var maxcount = count[1]; 
 
    if (maxcount >= currentcount) { 
 
    $(this).siblings("p").find("a").text(currentcount + "/" + maxcount) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<div class="card"> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"> <i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
</html>

來源

2017-04-25 09:02:40

這是工作夥伴！真的非常感謝！ :) – user3380738

@ user3380738樂於助人 –

要做到這一點，你需要使用this引用被點擊的a元素。在那裏，您可以使用siblings()和find()遍歷DOM以獲取要更新其文本的a元素。

爲了使每個計數獨一無二，您需要分析元素內的文本，然後對其進行增量。試試這個：

$(".sum").on("click", function() { 
 
    var $target = $(this).siblings('p').find('a'); 
 
    var values = $target.text().split('/'); 
 
    
 
    var clicks = parseInt(values[0], 10); 
 
    var limit = parseInt(values[1], 10); 
 
    
 
    if (clicks < limit) { 
 
    clicks++; 
 
    $target.text(clicks + '/' + limit); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"> <i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
</div>

來源

2017-04-25 08:58:03

jQuery單擊事件爲differents一個標籤相同的類名稱

回答

相關問題