时间戳

首页 > 解决方案 > 坚持使用简单的 JQuery 代码来显示和隐藏页面部分

javascript - 坚持使用简单的 JQuery 代码来显示和隐藏页面部分

问题描述

我正在尝试将 JQuery 代码转换为 Javascript，因为导入 JQuery 库并不是网站的最佳优化，而且我的代码非常简单，即使我自己不够熟练并且我需要社区的帮助...

所以这是我的代码

    $(function() {
        $('#cityselector').change(function(){
            $('.city').hide();
            $('.' + $(this).val()).show();
        });
    });

我知道在 JS 中我可能需要创建一个 let 变量，我将通过单击右侧元素来定义该变量，然后创建一个更改元素状态的函数（显示或隐藏）

document.getElementById('citySelector').addEventListener('click', function(){
    document.getElementByClass(this).style.display = "block";
    document.getElementByClass('city').style.display = "hidden";
});

我不知道如何为我列出的每个城市选择正确的 CSS 类，因为页面的每个元素都有 2 个类：“城市”和城市名称，如“牛津”、“伦敦”。目标是向我们选择的班级展示

html代码：

   <Select id="cityselector" class="selectordeville">
    
   <option value="oxford">Oxford</option>
   <option value="cambridge">Cambridge</option>
   <option value="stonehenge">Stonehenge</option>
   <option value="bath">Bath</option>
   <option value="york">York</option>
   <option value="robinhoodbay">Robin's hood's bay</option>
   <option value="lakedistrict">Lake District</option>
   <option value="snowdonia">Snowdonia</option>
   <option value="bristol">Bristol</option>
   <option value="cardiff">Cardiff</option>
   <option value="glasgow">Glasgow</option>
   <option value="edinburgh">Edinburgh</option>
   <option value="highlands">Highlands</option>
   <option value="harrypotter">Harry Potter Studios</option>
   <option value="altontowers">Alton towers</option>
   <option value="thorpepark">Thorpe park</option>
   <option value="windsor">Windsor</option>
   <option value="liverpool">Liverpool</option>
   <option value="brighton">Brighton</option>
   <option value="eurotrip">Eurotrip</option>
   <option value="canterbury">Canterbury</option>
</Select>

非常感谢您的帮助，我正在学习 JS，但我仍然无法理解如何在 JS 中使用“this”，JQuery 太“神奇”简单，我认为并没有给我们带来好习惯。

标签： javascripthtmljquery

解决方案

  1. 您使用的 JS 方法名称应该更正，getElementsByClassName而不是getElementByClass
  2. display = "none"代替hidden
  3. getElementsByClassName()返回一个 HTMLCollection 对象，不能直接设置样式，需要遍历

document.getElementById('cityselector').addEventListener('change', function(){
   
   // hide any currently showing element - equivalent to  $('.city').hide();
   var cities = document.getElementsByClassName('city');
   Array.from(cities).forEach(function(element) { 
     element.style.display = "none"
     }
   );
    
   
   // show any element having the selected class - equivalent to $(.cityname).show()
   var selected = document.getElementsByClassName(this.value);
   Array.from(selected).forEach(function(element) { 
     element.style.display = "block"
     }
   );
   
});
.city{
 display:none;
}
<Select id="cityselector" class="selectordeville">
    
   <option value="oxford">Oxford</option>
   <option value="cambridge">Cambridge</option>
   <option value="stonehenge">Stonehenge</option>
   <option value="bath">Bath</option>
   <option value="york">York</option>
   <option value="robinhoodbay">Robin's hood's bay</option>
   <option value="lakedistrict">Lake District</option>

</Select>

<div class="city oxford">Oxford</div>
<div class="city cambridge">Cambridge</div>
<div class="city stonehenge">Stonehenge</div>
<div class="city bath">Bath</div>
<div class="city york">York</div>
<div class="city robinhoodbay">Robin's hood's bay</div>
<div class="city lakedistrict">Lake District</div>

推荐阅读