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的索引匹配，對我來說，這似乎很難維護。