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

编写以下javascript代码，无需重复自己的操作

3 个答案: