onclick时如何区分多个href与同一个类?

时间:2016-07-25 12:23:06

标签: jquery

我在页面上有多个按钮(一个href链接),用于向上或向下投票。

我刚刚创建了一些生成相同链接按钮结构的示例代码。

from math import sqrt

y=[2]
x=3

while len(y) != 100:
    is_prime = True
    for i in range (2, int(round(sqrt(x) + 1))):
        if x % i == 0:
            x += 1
            is_prime = False
            break # this means that x is not prime and we can move on, note that break breaks only the for loop
    if is_prime:
        y.append(x)
        x += 1

print(y)

我有这个jQuery脚本来处理点击本身: 当我点击元素时,我能够获得正确的ID,但它会通过页面上的其余元素运行,然后倒计时。

在这个例子中,它给了我30个弹出窗口和所有数字。 我需要点击元素的id。

<?php for($i=0;$i<30;$i++){ ?>
<a data-id="<?php echo $i; ?>" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a>
<?php } ?>

3 个答案:

答案 0 :(得分:1)

  
$('.vote').click(function(e){

  e.preventDefault();

  var element = $(this); 
  var id = $(element).data('id');

  alert(id);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-id="1" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="2" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="3" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="4" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="5" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="6" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="7" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a>

您的脚本应如下所示。不需要.closest('span')因为这样的data-id属性在'a'标签本身。

<script>
$('.message').hide();

$('.vote').click(function(e){

    e.preventDefault();

    var element = $(this); 
    var id = $(element).data('id');

    alert(id);

});
</script>

答案 1 :(得分:0)

检查一下:

                <html>
                <head>
                    <script src="js/jquery-1.12.1.js"></script>
                </head>
                <body>
                    <?php for($i=1;$i<12;$i++){ ?>
                            <a data-id="<?php echo $i; ?>" href="#" class="vote"><button class="btn-no btn-vote">Yes</button></a>
                    <?php } ?>
                    <script>
                        $('.message').hide();   
                        $('.vote').click(function(e) {
                                e.preventDefault();
                                var id = $(this).data('id');
                                alert(id);
                        });
                    </script>
                </body>
            </html>

答案 2 :(得分:-1)

您应该在HTML中使用唯一ID。

data-id="1"更改为data-id="<?php echo $i; ?>"

您还可以缩短代码并删除span,因为代码中没有跨度。

alert($(this).data('id'));

这是一个有效的jsFiddle