Question

我编写了简单的jQuery开关，根据用户选择显示特定的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的单线程很短，但我相信可读性因其简洁而受损。

在这里a 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匹配（即＆＃39;是＆＃39;），您可以将整个函数设置为：

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

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

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

3 个答案:

概念证明