Question

我有这段代码：

<div id='mydiv'>
    <?php
        for($i = 0; $i < count($array); $i++)
        {
            print"<span>";
                print"<input type='button' value='+' />";
                print"<input type='button' value='-' />";
                print"<span>counter_value</span>";
            print"</span>";
            print"<br />";
        }
    ?>
</div>

这个想法是你单击其中一个按钮，内部<span>标签中的值递增或递减1. HTML / PHP本身完美地显示上面的内容并显示元素。但是，我的问题是$array可以有任意数量的元素。如果有（例如）五个外<span>个标签，我想知道哪个按钮被点击了。（这将使用jQuery完成）因为HTML是在for循环中生成的，我是＃39 ; m不愿意提供元素ID。

在jQuery中我想我需要这样的东西：

var div = $('#mydiv');

    div.on("click", "a", function(){
    //Determine the <span> tag where the button was clicked.
    //Get the counter value from the inner <span> tag within this <span> tag.
    //Determine which button was clicked.
    //Add/subtract one from value and update value in inner <span> tag.
    });

我希望我已经将问题清楚地说明了可以理解。任何帮助将不胜感激。

Answer 1

我刚刚给出了按钮元素类名来确定是添加还是减去

<?php
$array = array_fill(0,2,'Hello World');
?>

<div id='mydiv'>
    <?php
        for($i = 0; $i < count($array); $i++)
        {
            print"<span>";
                print"<input type='button' value='+' class='plus' />";
                print"<input type='button' value='-' class='minus' />";
                print"<span class='counter_value'>0</span>";
            print"</span>";
            print"<br />";
        }
    ?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('#mydiv').on('click','input[type="button"]',function(){
    var el = $(this).parent('span').find('.counter_value');
    if($(this).hasClass('plus')){
        $(el).html(parseInt($(el).text()) + 1);
    }else{
        $(el).html(parseInt($(el).text()) - 1);
    }
});
</script>

Answer 2

$("#mydiv :button").click(function() {
    var span = $(this).siblings("span");
    var direction = $(this).val() == '+' ? +1 : -1;
    span.text(function(i, oldval) {
        return parseInt(oldval, 10) + direction;
    });
});

动态HTML导致确定单击哪个按钮的问题

2 个答案: