编写以下 javascript 代码而不重复自己

Question

首先，PhpStorm 告诉我我的选择器是重复的，这是真的（第一行和最后一行是关于同一个选择器），其次，我只是觉得这是一段丑陋的代码，但我真的看不出我怎样才能让它看起来更好。我正在考虑为最后两行做一些切换的事情，但我想不通。有人能帮我吗？谢谢

if ($('#jstag_product_yes').is(":checked")) {
    $('#price_currency_div').hide();
}

$('#jstag_product_no').click(function () {
    $('#price_currency_div').show();
});

$('#jstag_product_yes').click(function () {
    $('#price_currency_div').hide();
});

Answer 1

您可以将 jQuery 选择的结果存储到一个变量中，然后改用该变量。这应该会让 PhpStorm 高兴。

let priceCurrencyDiv = $('#price_currency_div');

if ($('#jstag_product_yes').is(":checked")) {
    priceCurrencyDiv.hide();
}

可以对您重复的所有 jQuery 个选择进行此操作。

Answer 2

为防止重复选择器将 jQuery 对象保存在变量中：

const $productYes = $('#jstag_product_yes');
const $productNo = $('#jstag_product_no');
const $priceCurrencyDiv = $('#price_currency_div');

if ($productYes.is(":checked")) {
    $priceCurrencyDiv.hide();
}

$productNo.click(function () {
    $priceCurrencyDiv.show();
});

$productYes.click(function () {
    $priceCurrencyDiv.hide();
});

假设 #jstag_product_yes 是一个无线电输入，如果你想使用切换，你可以执行以下操作：

const $priceCurrencyDiv = $( "#price_currency_div" );

$( "#jstag_product_yes" ).on( "change", function() {

    if ( $(this).is(":checked") ) {
        $priceCurrencyDiv.hide();
        return;
    }

    $priceCurrencyDiv.show();

}).trigger( "change" );

因为我链接 .trigger("change") 它会在加载时触发。所以不再需要你的第一个 .is(":checked")!!

Answer 3

也许这个解决方案适合您。我为元素和可重用函数添加了变量来控制 div:

const productYes = $('#jstag_product_yes');
const productNo = $('#jstag_product_no');
const priceCurrency = $('#price_currency_div')

if (productYes.is(":checked") {
  hidePriceCurrency()
}

productNo.click(showPriceCurrency);
productYes.click(hidePriceCurrency);

function hidePriceCurrency() {
  priceCurrency.hide();
}

function showPriceCurrency() {
  priceCurrency.show();
}

编写以下 javascript 代码而不重复自己

Writing the following javascript code without repeating myself

javascript

code-formatting