Question

我创建了一个显示或隐藏“国家/地区”的表单。

这是代码的一部分，非常原始的代码。

我需要减少此功能以减轻页面加载并使它变得更容易。

  <script>
  jQuery(document).ready(function($) {
    $(".selezioneprovincia input").bind("change", function() {
        if ($('.selezioneprovincia .AQ input').is(':checked')) {
            $(".selezionepv .AQ").show(); // checked
        } else {
            $(".selezionepv .AQ").hide(); // unchecked
            $(".selezionepv .AQ input").prop("checked", false);
        }
        if ($('.selezioneprovincia .CH input').is(':checked')) {
            $(".selezionepv .CH").show(); // checked
        } else {
            $(".selezionepv .CH").hide(); // unchecked
            $(".selezionepv .CH input").prop("checked", false);
        }

该函数有效，但如果可能的话，我需要使用.AQ，.CH类减少显示隐藏的部分，这些类是可变的，它们引用的是Country。我想像一种获取该类（该项目有许多类）并将其每次放入每个函数一次的方法。

对不起，我的英语，希望能对您有所帮助。

再见 M。

Answer 1

我认为，您期望如此，

$(document).ready(function() {
    $(".selezioneprovincia input").change(function() {
        if ($(this.classname == AQ).is(':checked')) {
            $(this).show(); // checked
        } else {
            $(this).siblings().hide(); // unchecked
            $(this).siblings().prop("checked", false);
        }
    });
});

Answer 2

您应该使用一些变量以及一个函数来简化代码。像这样：

function processCheck($checkInput, $container) {
  if($checkInput.is(':checked')) {
    $container.show()
  } else {
    $container.hide();
    $container.find('input').prop('checked', false);
  }
}

$(function() { 
  $('.selezioneprovincia input').change(function() {
    processCheck($('.selezioneprovincia .AQ input'), $('.selezionepv .AQ'));
    processCheck($('.selezioneprovincia .CH input'), $('.selezionepv .CH'));
  });
});

减少一个jQuery函数来显示隐藏div

2 个答案: