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>

所以，当你点击链接“男孩”时，它会选择相应的下拉值“男孩”会有多个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的初学者，但我很肯定有更多更好的想法，所以如果你看到它，请随意推荐更好的路径：）< / p>

Answer 1

首先，一旦使用jQuery调用的结果实例化变量，就不需要再次调用jQuery函数 - 例如：

var Girl1 = $("#genderBox1 .gender a.girl");

您不再需要致电$(Girl1)，只需将其称为Girl1。

jQuery调用返回一个数组，如果有多个匹配元素，这可能很有用，所以：

var girls = $(".gender a.girl");

girls现在是a个标记的数组。我相信它们符合DOM的顺序，因此可能适合您。尝试通过Chrome开发人员工具或Firebug等运行它，您应该能够看到阵列。

Answer 2

你需要考虑很多事情

1）在JS的变量名中使用lowerCamelCase是一个很好的做法

2）我不会手动执行div，但是如下所示：

var genderSelect = $('select#cimy_uef_7'),
    genderOptions = genderSelect.children(),
    genderStyled = $('<div class="gender-styled-container"></div>');

genderOptions.each(function(i, option) {
    var newOption = $('<a href="#" class="option">' + option.innerText + '</a>');
    newOption.bind('click', function(evt) {
        evt.preventDefault();
        genderStyled.children('.option').removeClass('selected');
        newOption.addClass('selected');
        genderSelect
            .find('option:selected')
                .removeAttr('selected')
                .end()
            .find(option).attr('selected', 'selected');
    });
    genderStyled.append(newOption);
});
genderSelect.hide().after(genderStyled);

3）在http://jsfiddle.net/Uz6cV/

实施的示例

为什么呢？因为您一方面希望仍然作为选择框行事，另一方面，您希望新UI中的选项依赖于选择中的选项（您不希望用户看到不是的选项）目前在选择，然后无法提交）。

删除最后一行的hide（）以查看select以及单击新选项时的更改方式。

Answer 3

你可以试试这个

$(function(){
    // Set selected class on load
    var currentVal=$('select#cimy_uef_7').val();
    fl=(currentVal[0]).toLowerCase();
    currentVal=fl+currentVal.substr(1);
    $('#genderBox1 .gender a.'+currentVal).addClass('selected');

    // Click handler
    $('#genderBox1 .gender a').on('click', function(e){
        e.preventDefault();
        $(this).parents('div#genderBox1').find('a').removeClass('selected');
        $(this).addClass('selected');
        $('select#cimy_uef_7').val($(this).text());
    });
});

DEMO

更新：您也可以try this进行多项选择，或even better使用div中的data-。

Answer 4

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

按如下方式构建HTML，确保锚点（“Boy”/“Girl”）包含的文本与相应菜单选项的值完全匹配。

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');

Answer 5

以下代码块

//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");
  });

可以替换为

$("#genderBox1 .gender a").click(function(event){
    event.preventDefault();
    $("#genderBox1 .gender a").removeClass("selected");
    $(this).addClass("selected");
    Gender1.val($(this).html());
});

<强> demo

Answer 6

小提琴 - http://jsfiddle.net/tariqulazam/aadDL/

我会像下面那样修改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><a class="gender Boy" href="">Boy</a></div>
  <div><a class="gender Girl" href="">Girl</a></div>
</div>

这里是修改后的jquery代码，它将执行相同的操作

$(".gender").click(function(event){
    event.preventDefault();
    $("#cimy_uef_7 option:contains("+ $(this).text() +")").attr('selected','selected');
});

$("#cimy_uef_7").change(function(){
    $(".gender").removeClass('selected');
    $("a." + $(this).val()).addClass('selected');
});

通过替换变量缩短jQuery代码

6 个答案: