确定单击哪个按钮的动态HTML原因

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循环中生成的，我不愿意给出元素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;
    });
});