Question

通过其他帖子我必须要么我的代码有问题，否则我的逻辑基本上是有缺陷的。

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

在我需要添加数组之前，所有内容都是workign，即我正在使用单个元素选择器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

从我看到的 - 您在循环中定义单击函数。这些单击函数具有对ppl_P变量的引用。定义单击时，似乎没问题。但是当触发click时，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元素使用相同的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。

Jquery使用自定义元素ID循环数组选择器

2 个答案: