異なるjQueryのクリックイベントタグ同じクラス名

-1

私は、ユーザーを追加するためにカウンタを使用するために同じクリックイベントを使用しようとしています。また、同じクラス名の異なるaタグがあります。私は、クリックしているタグの上で一度インクリメントしたいと思っています。ありがとう！異なるjQueryのクリックイベントタグ同じクラス名

<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).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幸せに助けてください –

あなたがクリックされたa要素を参照するためにthisを使用する必要があり、これを達成するために。そこからsiblings()とfind()を使用してDOMを走査し、テキストを更新するa要素を取得できます。

各カウントを一意にするには、要素内のテキストを解析してからインクリメントする必要があります。これを試してください：あなたは、あなたがクリックしたかの要素を取得するために$(this)を使用することができます

$(".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のクリックイベントタグ同じクラス名

答えて

関連する問題