event.target 的脚本修订

Question

我是 js 的新手，有人可以看看这段代码并告诉我它是否正确，是否可以改进以及如何改进？它按预期工作，但老实说我不知道它是否写得很好。提前致谢 (:

           <script>
               $(document).ready(function() {

                   $("button").click(function(event) {

                       var a = (event.target).classList.item(0);
                       var b =  ".carousel" + "." + a ;

                       $(b).myfunction;

                   });
               });
           </script>

该脚本的原因是我在自定义弹出模式中的滑块（“JQuery lightSlider”）中有一个旋转木马（Bootsrap），我不希望 imgs 旋转木马加载到页面仅在轮播可见时启动。

脚本所做的是“存储”点击的按钮元素（“custom-n”）的class名称，然后写入.carousel.custom-x存储在变量中b，然后使用 var b 作为选择器来调用用 src 替换 data-src 的 custom-n carousel 的函数。

我希望这不会造成混淆哈哈

这是 html 的简化版，只要单击 <button>，模式就会打开。这些是主滑块（光滑块）的“缩略图”，所以： <button class="custom-1"> 打开模式并将“light-slider”设置为幻灯片 n1 <button class="custom-2"> 打开模式并将“light-slider”设置为幻灯片 n2 等等。

lightslider 幻灯片内的旋转木马都有带有数据源的 img，想法是用应该与自定义“相关”的旋转木马的 src 替换数据源


   <div class="light-slider-buttons">
       <button class="custom-1 myclass"></button>
       <button class="custom-2 myclass"></button>
       <button class="custom-3 myclass"></button>
   </div>
   

   <div class="modal-wrp">
      <div class="modal-inner">
        <ul id="light-slider">
          <li>
            <div class="slide-wrapper">
                      
              <div class="carousel custom-1">                                                    
                <div class="carousel-inner">
                  <div class="carousel-item active">
                  <img data-src="...">
                  </div>
                  <div class="carousel-item">
                  <img data-src="...">
                  </div>
                    <div class="carousel-item">
                  <img data-src="...">
                  </div>
                </div>                           
              </div>
                       
            </div>
          </li>
               
        </ul>

      </div>


   </div>

Answer 1

代码看起来不错。

我有两个建议。

首先，您似乎在使用 class 属性来存储数据（custom-1，等等）

为什么不将其设置为 data-item-class 属性（任何以 data- 开头的名称都可以）？

   <div class="light-slider-buttons">
       <button class="myclass" data-item-class="custom-1"></button>
       <button class="myclass" data-item-class="custom-2"></button>
       <button class="myclass" data-item-class="custom-3"></button>
   </div>

该值可以读作 event.target.dataset.itemClass（item-class 变为 itemClass，请参阅 docs 了解更多信息）。

变量 a 的代码将替换为：

var a = event.target.dataset.itemClass;

其次，为 'button' 选择器设置 click 事件处理程序太宽。

以后将具有其他用途的新 button 元素添加到您的页面时会导致错误。

将 <div class="light-slider-buttons"> 视为包装 button 元素并仅将 click 处理程序应用于这些元素的组件会更安全。

$(".light-slider-buttons button").click(function(event) {
...
}

变化不大，但很重要，因为如果您在 <div class="light-slider-buttons"> 之外添加其他按钮，它们将不会获得 click 事件处理程序。

jQuery 使用 CSS 选择器语法，您可以在 docs.

中找到更多信息

这是 script 标签的推荐代码

           <script>
               $(document).ready(function() {

                   $(".light-slider-buttons button").click(function(event) {

                       var a = event.target.dataset.itemClass;
                       var b =  ".carousel" + "." + a ;

                       $(b).myfunction;

                   });
               });
           </script>

P.S. jQuery 编程风格非常重要（指定页面应如何在每个事件上更新）。

还有其他构建 UI 的方法，例如在 React 中编程是声明式的（根据给定的 input/state 指定 UI 的外观）

event.target 的脚本修订

Script Revision for event.target

html

javascript

jquery

slider

carousel