Question

我有一个表单，每次更改菜单值时都会提交一个jQuery .ajax事件。 jQuery函数在数据库中查询产品的价格，然后使用结果更新一个类为“.price”的div。页面上有五个这样的表单，每个表单都有一个类为“.price”的div

/* Variation Price Query */
$(".varSel").live("change", function(){
    var formdata = $(this).parents('form').serialize();
    $.ajax({
        type: "POST",
        url: "library/varPrice.php",
        data: formdata,
        success: function(html){
    $('.price').html(html);

      }
    });
});

我遇到的问题是该函数使用“.price”类更新所有div，而不仅仅是下一个div。我尝试过类似的东西：

$(this).next('div.price').html(html);

但它没有返回任何东西。

以下是html表单的示例：

<form name='addToCart' id='addToCart7' action='cart.php?action=add' method='post'>
<ul class='vars' id='varlist_p7'>
    <li><label for="Size">Size</label> 
    <select id="Size" name="Size" class='varSel'>
        <option>
            1oz
        </option>

        <option>
            4oz
        </option>

        <option>
            8oz
        </option>
    </select>
    </li>

    <li>
        <div class='price'>
            $ 3.00
        </div>
    </li>

    <li><input type='submit' class='buynow' value=''></li>
</ul>
</form>

Answer 1

因为div.varSel和div.price不是兄弟姐妹，所以你必须比下一个更深入（）

$(this).parent().next("li:has(.price)").children(".price").html(html)

应该有效

Jquery：仅更新具有特定类的下一个div

1 个答案: