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

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 选择目标元素的代码，也许您需要id更改 attr，因为 1id仅适用于页面中的 1 个元素，您应该使用class。

$('#article-title select').change(function (e) {
e.preventDefault();
var $target = $(this).data('target')
var data = {
articleid: $(this).val()
}
$.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;
$target.find('#article-price-before-tax input').val(article_price);
calculateQuote();
$target.find('#article-description textarea').val(article_description);
},
fail: function (response) {
console.log("error rest api 100");
}
});
})

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");
}
});
});
});