jQuery循环的具有自定义元素ID的数组选择器

Question

在其他帖子中，我要么代码有问题，要么逻辑上有缺陷。

因此，发生的事情是我有一系列被调用/写入的数组元素，这些数组元素需要具有由Java脚本修改的子元素。

在我需要添加一个数组之前，所有事情都是可行的，即我在下面的函数中使用单个元素选择器ID，并获得了正确的结果。 但是，在循环中添加唯一ID后，它不想更改。

这就是发生的情况，我有一个单独的div隐藏了。 这会打印出数组中有多少元素作为其PHP会话变量。 $ Carray是一个计数函数，可以正常工作。

<div class="Carray"><?php echo $Carray;?></div>

然后，当项目循环时，它们添加一个数组ID

<?php 
$arrayID = -1;
foreach($_SESSION['activity'] as $key){ 
foreach($key as $list){ 
$arrayID += 1;      
?>    
    <div id="subP_<?php echo $arrayID;?>" class="booking_action">-</div>
    <div id="booking_people_<?php echo $arrayID;?>" class="booking_people_number">
        <?php echo $list["i_quantity"] ?>
    </div>
    <div id="addP_<?php echo $arrayID;?>" class="booking_action">+</div>
<?php }} ?>

然后在Javascript中，我调用一个循环函数，该循环函数计算通过多少$ Carray元素进行计数，然后将正确的函数动作与正确的div ID对应

   //get the counted array variable and force as an int
    var js_var = parseInt($('.Carray').html(),10);

    // loop for however many array elements there are
    for (i = 0; i < js_var; i++){

    // get the amount of people from a field 
    var ppl_P =  parseInt($('#booking_people_'+i).html(),10);

    // subtract 1 person and then change the output to match the new people count 
    $("#subP_"+i).click(function() {
      if(ppl_P >= 2){
        ppl_P -= 1;
        $('#booking_people_'+i]).html(ppl_P);
      }
    });

    // Add 1 person and then change the output to match the new people count 
    $("#addP_"+i).click(function() {
        ppl_P += 1;
        $('#booking_people_'+i).html(ppl_P);
    });
    }

******************************编辑******************* ***

因此，基于效果很好的Jimmi Elofsson答案，我想将其扩展为影响不在父/子选择器内的元素。 选择器是“ .booking_price_inner”，这是存储在其他位置的另一个div。 我假设需要正确语法的行是标记行。

“ .booking_base_price”位于父元素/子元素中。

    $(".subPerson").click(function() {
    // Subtract Person 
    var subPeopleCount = getCurrentCountByPeopleItem($(this).parent()) - 1;
    $(this).parent().children('.booking_people_number').html(subPeopleCount>1 ? subPeopleCount : 1);
    //Change price
    var totalPriceS = subPeopleCount * getBasePrice($(this).parent());
    $(this).parent().children('.booking_price_inner').html(totalPriceS); <-------
});
$(".addPerson").click(function() {
    //Add person
    var addPeopeCount = getCurrentCountByPeopleItem($(this).parent()) + 1;
    $(this).parent().children('.booking_people_number').html(addPeopeCount);
    //Change price
    var totalPriceA = addPeopleCount * getBasePrice($(this).parent());
    $(this).parent().children('.booking_price_inner').html(totalPriceA); <------
});
// get the number of people in the specific array
function getCurrentCountByPeopleItem(peopleItem) {
    return parseInt(peopleItem.children('.booking_people_number').html());
}
//get the base price
function getBasePrice(peoplePrice){
     return parseInt(peoplePrice.children('.booking_base_price').html());
}

标记

<div id="<?php echo $arrayID;?>" class="booking_people">
    <div class="booking_date_header">People:</div>
    <div class="subPerson booking_action">-</div>
    <div class="booking_people_number"><?php echo $list["i_quantity"] ?></div>
    <div class="addPerson booking_action">+</div>
    <div class="booking_base_price"><?php echo $list["i_base_price"] ?></div>
</div>
<div class=spacer></div>
<div class=cost>
    <div class=booking_price_inner></div>
</div>

Answer 1

从我所看到的-您在循环中定义了click函数。 这些点击函数引用了ppl_P变量。 定义点击时，似乎可以。 但是，当点击被触发时，ppl_P变量已经被设置为上次迭代循环的值。 因此，无论何时调用该click函数，它始终具有相同的结果，不是吗？

正确的方法是将该ppl_P变量作为参数传递，因此您没有对在其他作用域中已更改的变量的引用。 就像是：

function addClickFunction(i, ppl_P){

$("#subP_"+i).click(function() {
  if(ppl_P >= 2){
    ppl_P -= 1;
    $('#booking_people_'+i]).html(ppl_P);
  }
});

// Add 1 person and then change the output to match the new people count 
$("#addP_"+i).click(function() {
    ppl_P += 1;
    $('#booking_people_'+i).html(ppl_P);
});

}

然后在循环内使用此函数：

var ppl;
for (i = 0; i < js_var; i++){
    ppl =  parseInt($('#booking_people_'+i).html(),10);
    addClickFunction(i, ppl);
}

这还没有经过测试，但是我敢肯定，你会明白的:)

Answer 2

如果您不介意，我会对您的代码进行一些更改。

您可以借助一些DOM遍历，使添加/减去元素使用相同的click函数。 这样，您就不需要CArray来跟踪按钮。

Javascript：

// subtract 1 person and then change the output to match the new people count  
$(".subPerson").click(function() {
    var subPeopleCount = getCurrentCountByPeopleItem($(this).parent()) - 1;// Substract by one.
    $(this).parent().children('.booking_people_number').html(subPeopleCount>1 ? subPeopleCount : 1);
});

// Add 1 person and then change the output to match the new people count 
$(".addPerson").click(function() {
    var addPeopeCount = getCurrentCountByPeopleItem($(this).parent()) + 1; // Increase by one.
    $(this).parent().children('.booking_people_number').html(addPeopeCount);
});

function getCurrentCountByPeopleItem(peopleItem) {
    return parseInt(peopleItem.children('.booking_people_number').html());
}

PHP：

<?php 
$arrayID = -1;
foreach($_SESSION['activity'] as $key){ 
foreach($key as $list){ 
$arrayID += 1;      
?>
<div class="booking_people_item" id="<?php echo $arrayID;?>">
    <div class="subPerson booking_action">-</div>
    <div class="booking_people_number">
        <?php echo $list["i_quantity"] ?>
    </div>
    <div class="addPerson booking_action">+</div>
</div>
<?php }} ?>

我在您的元素周围添加了一个div包装器，称为booking_people_item。