3

我有一个带有一堆下拉选项的表单，我通过单击链接和（将来，图像）而不是使用实际的下拉菜单来选择选项来修饰这些选项。有很多下拉菜单，大多数都会重复相同的基本概念，有些会重复使用不同的变量。这是其中之一的 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 的初学者，但我很肯定那里有更好的想法，所以如果你看到它，请随时推荐更好的路径:)

4

6 回答 6

2

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

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

你不需要再打电话$(Girl1)了，你可以打电话给它Girl1。

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

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

girls现在是一个a标签数组。我相信它们是 DOM 的顺序，所以这可能对你有用。尝试通过 Chrome 开发人员工具或 Firebug 或其他工具运行它，您应该能够看到数组。

于 2012-10-27T04:52:10.497 回答
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() 以查看选择以及单击新选项时它如何变化。

于 2012-10-27T04:55:43.143 回答
2

你可以试试这个

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

演示。

更新：您也可以尝试多次选择，甚至更好地data-在 div 中使用。

于 2012-10-27T05:18:30.653 回答
2

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

如下构建您的 HTML，确保锚点（“男孩”/“女孩”）包含的文本与相应菜单选项的值完全匹配。

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

演示

备注：

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

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

如果在任何时候（附加处理程序之后）需要以编程方式更改菜单，则执行以下操作以确保相应的远程链接保持最新：

$("#cimy_uef_7").val('Girl').trigger('change');
于 2012-10-27T08:03:26.833 回答
0

下面的代码块

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

演示

于 2012-10-27T04:52:28.143 回答
0

小提琴 - 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');
});
于 2012-10-27T05:03:05.150 回答