编写以下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对象保存在变量中：

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 2

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

let priceCurrencyDiv = $('#price_currency_div');

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

这可以为您重复的所有 jQuery 选择完成。

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