Question

HTML：

<p class="fields">
  <select id="parts">
    <option value="10">Ring</option>
    <option value="50">Necklace</option>
    <option value="3">Pendant</option>
  </select>
  <label for="price">Price</label>
  <span class="price"></span>
</p>


function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
    $.ajax({
      url: '/parts/' + value + '/price',
      type: 'get',
              context: this,
      dataType: 'script',
      success: function(responseData) {
        $(this).next("span.price").html(responseData);
      }
    }); 
});
};

我试过这种方式但没有成功。

“onchange”工作正常我只需要一些帮助就可以将span标记内的值显示为内容。

任何帮助？

Answer 1

@samccone在正确的轨道上，但它不适合你，因为span.price不是select＃parts元素之后的next元素（我假设它是你要发送到load_part_price_select的元素）功能）。

它是siblings之一，所以试试这个：

$(this).siblings("span.price:first").html(responseData);

或尝试nextAll：

$(this).nextAll("span.price:first").html(responseData);

我将假设'兄弟姐妹'更有效率，因为它不关心匹配的元素是在'this'元素之前还是之后。但如果您不想匹配以前的跨度，请使用'nextAll'。

然后按照samccone的评论设置ajax上下文：

function load_part_price_select(id, value) {
$('#' + id ).live('change',function() {
    $.ajax({
      url: '/parts/' + value + '/price',
      type: 'get',
      context: this,
      dataType: 'script',
      success: function(responseData) {
        $(this).nextAll("span.price:first").html(responseData);
      }
    }); 
});
};

Answer 2

$(this).next("span.price").html(responseData);

应该可以正常工作

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

2 个答案: