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

Question

看完其他帖子，我的代码肯定有问题，或者我的逻辑存在根本性缺陷。

所以我有一系列数组元素得到 called/written，这些数组元素需要有由 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 的完美回答，我想扩展它以影响不在 parent/child 选择器内的元素。选择器是 '.booking_price_inner'，这是另一个存储在别处的 div。我假设需要正确语法的行是标记的行。

'.booking_base_price' 在 parent/child 元素中。

    $(".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

据我所知 - 您是在循环中定义点击函数。这些点击函数引用了 ppl_P 变量。当您定义点击时，它似乎没问题。但是当点击被触发时，ppl_P 变量已经设置为循环上次迭代的值。所以，无论何时调用该点击函数，它总是有相同的结果，不是吗？

正确的方法是将此 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 遍历的帮助下让您的 add/substract 元素使用相同的点击功能。这样你就不需要 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 }} ?>

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

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

Jquery looped array selectors with custom element ID's

javascript

arrays

jquery