jquery - 通过替换变量来缩短 jQuery 代码

Question

我有一个带有一堆下拉选项的表单，我通过允许通过单击链接和(将来是图像)而不是使用实际的下拉菜单来选择选项来装饰它们。有很多下拉菜单，大多数都会重复相同的基本想法，有些会实际上重复不同的变量。这是其中之一的 HTML。

<tr class="box1">
  <td>
    <select id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

然后点击相应的爱好者链接，将在下拉列表中选择相应的选项。

<div id="genderBox1">
  <div class="gender"><a class="boy" href="">Boy</a></div>
  <div class="gender"><a class="girl" href="">Girl</a></div>
</div>

所以，当你点击链接“Boy”时，它会选择相应的下拉值“Boy”，将会有多个 Box#，所以我每次都可以使用新变量重复 jQuery，但肯定有一个更短的路。这是让它工作的 jQuery。

//Box1 Gender
  var Gender1 = $('select#cimy_uef_7');
  var Boy1 = $("#genderBox1 .gender a.boy");
  var Girl1 = $("#genderBox1 .gender a.girl");

//On Page Load - Check Gender Box 1 Selection and addClass to corresponding div a
  if ( $(Gender1).val() == "Boy" ) {
    $(Boy1).addClass("selected");
    } else {
    $(Boy1).removeClass("selected");
    }

  if ( $(Gender1).val() == "Girl" ) {
    $(Girl1).addClass("selected");
    } else {
    $(Girl1).removeClass("selected");
    }

  //On Click - Change Gender Box 1 select based on image click
  $(Boy1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Boy");
    $(Girl1).removeClass("selected");
  });

  $(Girl1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Girl");
    $(Boy1).removeClass("selected");
  });

我的想法是缩短它，只是为每个框提供一个变量列表，然后循环遍历数字 - 1,2,3,4，并让 jQuery 为每个变量获取相同的 #，但我无法弄清楚想办法做到这一点。

如果我还可以提供其他任何信息来使问题变得更好，请告诉我。这是我缩短这段代码的最佳想法，因为我仍然是 jQuery 的初学者，但我确信有更好的想法，所以如果您看到它，请随意推荐更好的路径:)

Answer 1

这是一个通用的解决方案。

按如下方式构建 HTML，确保 anchor (“男孩”/“女孩”)包含的文本与相应菜单选项的值完全匹配。

HTML:

<tr class="box1">
  <td>
    <select class="remoteSelectable" id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

<div id="genderBox1" class="remoteSelector" data-menu="cimy_uef_7">
  <div class="gender"><a href="">Boy</a></div>
  <div class="gender"><a href="">Girl</a></div>
</div>

JavaScript:

//force select menus to same value as clicked remote link
$(".remoteSelector a").on('click', function(e) {
    e.preventDefault();
    var $this = $(this).addClass('selected'),
        $container = $this.closest(".remoteSelector");
    $container.find("a").not(this).removeClass('selected');
    $('#' + $container.data('menu')).val($this.text());
});

//force remote links to reflect value of selected menu option
$(".remoteSelectable").on('change', function() {
    var $this = $(this);
    $(".remoteSelector").filter(function() {
        return $(this).data('menu') == $this.attr('id');
    }).find("a").removeClass('selected').filter(function() {
        return $(this).text() == $this.val();
    }).addClass('selected');
}).trigger('change');

<强> DEMO

注释:

• 立即触发“更改”处理程序，以强制将正确的远程链接样式设置为“选定”。

• 选择菜单可以通过绝对定位将其移出屏幕来隐藏，或者如果它们不是要提交的表单的一部分，则可以使用 display:none 来隐藏。

如果在任何时候(附加处理程序之后)需要以编程方式更改菜单，请按以下步骤操作，以确保相应的远程链接保持最新:

$("#cimy_uef_7").val('Girl').trigger('change');