jQuery-仅在项目处于活动状态时删除类

Question

我写了简单的jQuery开关，其中根据用户选择显示特定的div。 它正在工作，但我不喜欢这种解决方案。 您能建议我如何处理隐藏此div的更改吗？ 现在我简单地添加$(".city").addClass('hide'); 对于每种情况，但必须有一些更好的解决方案，可以处理变更事件或其他事件。

这是工作示例： http : //codepen.io/anon/pen/OyOgGK

谢谢您的帮助

Answer 1

您只需一行即可完成所有操作，而无需专门针对每个city div：

$('#myList').change(function() {
    $('.city').hide().eq($(this)[0].selectedIndex - 1).show();
});

概念验证

 $('#myList').change(function() { $('.city').hide().eq($(this)[0].selectedIndex - 1).show(); }); 

 .city { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <legend>Selecting elements</legend> <p> <label>Select city</label> <select id="myList" > <option value="0">--</option> <option value="2">Belo <option value="1">Florianópolis</option> <option value="2">Belo Horizonte</option> <option value="3">Goiânia</option> <option value="4">Salvador</option> </select> </p> <div id="fl" class="city"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis auctor nisl tincidunt euismod. Integer dapibus urna eget dolor egestas, a efficitur felis fermentum. Vestibulum fringilla felis vel augue tempus, id efficitur tellus mattis. Nullam gravida felis est, non cursus libero tempor sit amet. Aenean cursus facilisis hendrerit. Proin eget purus quis est maximus lobortis. Nulla facilisi. Nunc a lobortis augue, at lacinia enim. Pellentesque eget sagittis velit. Vivamus sed erat nec sem maximus faucibus a rutrum ligula. Curabitur maximus eros id nisi tristique volutpat sed nec magna. Duis dapibus metus et nunc eleifend porttitor. Cras mattis porta malesuada. Fusce rutrum nulla quis magna consectetur, vitae blandit nibh maximus. Fusce dapibus, diam eu hendrerit tincidunt, metus enim lobortis dui, a blandit leo urna quis odio. In tincidunt lacinia rutrum. </p> </div> <div id="be" class="city"> <p> Proin egestas, nulla vitae aliquet porttitor, ipsum turpis aliquet lectus, sed faucibus tellus erat quis orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ut auctor purus, in dictum nisi. Morbi vulputate enim sed tincidunt tempor. Morbi sollicitudin eros vel purus tincidunt luctus. Nunc nunc dolor, gravida et ipsum a, tempus hendrerit lorem. Ut convallis fermentum diam a posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquam enim non quam molestie consequat. Vivamus cursus vel ex eget egestas. Nulla vitae vulputate quam. </p> </div> <div id="go" class="city"> <p> Nam at metus eleifend, vulputae nunc ac, mollis ipsum. Aenean hendrerit commodo tellus in fermentum. Curabitur rutrum massa at nunc aliquam lobortis. Donec euismod mattis nulla, vitae viverra arcu cursus ac. Cras nulla mi, accumsan vitae odio nec, mollis ullamcorper lectus. Nulla id diam malesuada, bibendum nulla a, lacinia lacus. Etiam sit amet mi condimentum, ultrices purus nec, dictum nisl. Vivamus enim elit, rhoncus vel quam vitae, sagittis porttitor sapien. Vestibulum egestas sagittis nisl vel dignissim. In dapibus, sapien id rutrum molestie, metus turpis tempus mauris, eu vulputate ex purus vulputate urna. Praesent non dictum elit. Nam vel urna sapien. Aenean sodales, lorem at ullamcorper sollicitudin, nisi ante laoreet nisi, nec volutpat ligula mauris at orci. Mauris libero ante, tincidunt at ante eget, congue suscipit metus. Nam eros libero, ultricies ut rutrum sed, euismod ac nisl. Praesent interdum urna sed vulputate auctor. </p> </div> <div id="sa" class="city"> <p> Suspendisse mollis mauris id mauris maximus, at vestibulum leo malesuada. Pellentesque nec interdum lectus, sed rhoncus sapien. Vivamus tincidunt felis quam, et faucibus turpis condimentum non. Sed at posuere ligula. Maecenas euismod massa a lorem pulvinar molestie. Vestibulum ipsum turpis, consectetur non eros vel, condimentum ornare sapien. Integer a molestie justo. Ut in scelerisque erat, ut tempor lacus. Integer tempus lorem non eros sollicitudin, ac fringilla dui maximus. Mauris tortor tellus, rutrum ac orci ac, ornare vulputate nulla. Ut nisl odio, porttitor eget varius eu, malesuada ac sapien. Suspendisse accumsan eros non nunc dapibus, vel vehicula nisi aliquet. Aliquam erat volutpat. Phasellus tincidunt pellentesque diam, ut egestas ipsum fringilla a. Proin ac vestibulum augue. Aenean mi massa, hendrerit vitae efficitur vitae, cursus nec velit. </p> </div> 

Answer 2

尽管mevius的单行代码很短，但我相信其简洁性会影响可读性。

这是我对CodePen的解决方案。

首先，我从标记中删除了onclick属性，并将值更改为对定位更有用：

<select id="myList">
  <option value="">--</option>
  <option value="fl">Florianópolis</option>
  <option value="be">Belo Horizonte</option>
  <option value="go">Goiânia</option>
  <option value="sa">Salvador</option>
</select>

相反，我通过jQuery注册了侦听器：

$(document).ready(function(){

  $('.city').hide(); // hide all the cities at the start
  $('#myList').change(updateDisplay);

  function updateDisplay(event){
    var selected = $(event.target).val();
    $('.city').hide();

    // this will target #fl if Florianópolis is selected
    $('#' + selected).show();
  }
});

Answer 3

考虑比你做$(".city").addClass('hide'); 您可能想多次将其从switch语句中拉出。 同样，如果您设置选项的值以匹配元素的ID（即“ be”），则可以使整个函数如下所示：

function myfunction() {
  $(".city").addClass('hide');
  $("#" + document.getElementById("myList").value).removeClass('hide');
}

有很多方法可以使用更多JavaScript或模板来实现，但这可能是一个好的开始。 上面的内容不需要让值与jQuery表达式匹配div的索引匹配，对我来说，这似乎很难维护。