Question

下面粘贴的代码可以正常工作，并且可以在多行选择更改时运行。

我的问题是我希望它只在发生选择更改的行上运行

jQuery(document).ready(function($) {
  $( document ).on( 'change', '#article-title select', function(e) {
      e.preventDefault();
      jQuery("#orderrow_articles .acf-repeater .acf-row").each(function(i, element) {
       var row = $(element);
       var article_id = row.find("#article-title option:selected").val();
       var data = {
        articleid: article_id,
    };

  $.ajax({
      method: 'POST',
      url: rest_object.api_url + 'articleid/', 
      data: data,
      beforeSend: function ( xhr ) {
          xhr.setRequestHeader( 'X-WP-Nonce', rest_object.api_nonce );
      },
      success : function( response ) {
        var article_price = response.price;
        var article_description = response.description;
        row.find('#article-price-before-tax input').val(article_price);
        calculateQuote();
        row.find('#article-description textarea').val(article_description);
      },
      fail : function( response ) {
        console.log("error rest api 100");
      }
  });
});
});
});

例如，当我在第3行选择一个选项时，我只想在第3行更新article_price和article_description，而不是全部更新。

Answer 1

这就是我从您的问题中得到的，希望这会对您有所帮助

首先，您需要唯一的标识符，以便您可以选择匹配元素，例如

<div class="acf-row acf-row-{{your loop key / other identifier}}"></div>

第二，添加数据目标，以便您可以找到元素

<select data-target=".acf-row-{{your loop key / other identifier}}"></select>

第三，用data-attribute对js select目标元素进行编码，也许您需要更改id属性，因为在页面中您应该使用{{1}的1个元素中只有1个id }。

class

Answer 2

通过跳过each（）来解决。

解决方案：

jQuery(document).ready(function($) {
  $( document ).on( 'change', '.article-object', function(e) {
      e.preventDefault();
      var article_row_id_1 = e.target.id;
      var article_row_id_2 = article_row_id_1.substring(article_row_id_1.indexOf("row"));
      var article_row_id = article_row_id_2.substring(0, article_row_id_2.indexOf("-field"));
      var article_id = jQuery('tr[data-id*="'+article_row_id+'"] .article-object option:selected').val();
      console.log(article_row_id);
      console.log(article_id);
      var data = {
        articleid: article_id,
      };

      $.ajax({
          method: 'POST',
          url: rest_object.api_url + 'articleid/', 
          data: data,
          beforeSend: function ( xhr ) {
              xhr.setRequestHeader( 'X-WP-Nonce', rest_object.api_nonce );
          },
          success : function( response ) {
            var article_price = response.price;
            var article_description = response.description;
            jQuery(' tr[data-id*="'+article_row_id+'"] .article-price-before-tax input').val(article_price);
            calculateQuote();
            jQuery(' tr[data-id*="'+article_row_id+'"] .article-description textarea').val(article_description);
          },
          fail : function( response ) {
            console.log("error rest api 100");
          }
      });
  });
});

在单行而不是全部上运行jQuery函数？

2 个答案: