用变量替换特定条件答案

【问题标题】：replace specific condition with a variable用变量替换特定条件
【发布时间】：2013-06-26 04:24:34
【问题描述】：

<select id="menu1">
    <option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
    <option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
    <option data-icon="arrow-u" data-iconpos="left">Trees</option>
    <option data-icon="arrow-u" data-iconpos="right">Bushes</option>
</select>
<select id="menu2">
    <option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
    <option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
    <option data-icon="arrow-u" data-iconpos="left">Trees</option>
    <option data-icon="arrow-u" data-iconpos="right">Bushes</option>
</select>
$('select').change(function () {
    if ($(this).is('#menu1')) {
        alert('menu hone has been changed')
    }
})

上面说明了两个菜单和一个条件：如果选择了菜单一，则发出警报。我的代码中其实有五个菜单，所以需要精简一下。

需要将条件替换为将变量分配给已更改菜单的 id 的行。怎么做？

【问题讨论】：

标签： jquery conditional simplify

【解决方案1】：

试试这个，

$('select').change(function () {
    var id=$(this).attr('id');
    switch(id)
    {
        case "menu1":
            alert('menu 1 changed');
            break;
        case "menu2":
            alert('menu 2 changed');
            break;
    }
});

Fiddle

【讨论】：

非常感谢。有没有办法将此应用于字段集？我意识到每个选择字段可能需要位于单独的字段集中。从这里开始最简单的方法是忽略字段集，但它会不那么发达:) 如何提醒字段集的 id？ jsfiddle.net/qYmZa
您可以在api.jquesry.com/closest 上使用closest()，如$(this).closest('fieldset').attr('id'); 中的onchange 函数。
本页下方建议不建议onclick。你能想出一种类似于你最初提出的方法，但对于 fieldset 吗？我试过这个：jsfiddle.net/LPCpR/1

【解决方案2】：

试试这个

 <select id="menu1" onchange="changeEvent(this);">
   <option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
   <option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
   <option data-icon="arrow-u" data-iconpos="left">Trees</option>
   <option data-icon="arrow-u" data-iconpos="right">Bushes</option>
 </select>
 <select id="menu2" onchange="changeEvent(this);">
  <option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
  <option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
  <option data-icon="arrow-u" data-iconpos="left">Trees</option>
  <option data-icon="arrow-u" data-iconpos="right">Bushes</option>
 </select>

JS

 function changeEvent(obj)
 {
    alert(obj.id);
 }

Demo

【讨论】：

我不推荐使用onchange。它又旧又笨重。并降低性能和可维护性

【解决方案3】：

尝试使用 id 属性获取 id...尝试以下解决方案来检查更改了哪个菜单。

  $('select').change(function () {
        if ($(this)) {
            alert( 'menu' + this.id + 'has been changed')
        }
    })

【讨论】：

【解决方案4】：

试试这个

$('select').change(function () {

        alert(  $(this).attr('id') + 'has been changed')

})

【讨论】：

【解决方案5】：

http://jsfiddle.net/LPCpR/12/


<select id="menu_one">
<option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
<option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
<option data-icon="arrow-u" data-iconpos="left">Trees</option>
<option data-icon="arrow-u" data-iconpos="right">Bushes</option>
</select>
<select id="menu_two">
<option data-icon="arrow-u" data-iconpos="top">- SELECT -</option>
<option data-icon="arrow-u" data-iconpos="bottom" selected="selected">Shrubs</option>
<option data-icon="arrow-u" data-iconpos="left">Trees</option>
<option data-icon="arrow-u" data-iconpos="right">Bushes</option>
 </select>

JS：

 $('select').change(function () {

      var menuNo = $(this).attr("id").split("_");
      alert('menu '+menuNo[1]+' has been changed');

   });

你可以看到解决方案的 js fiddle。

【讨论】：