Question

我正在尝试通过特定的点击功能更改条形图的背景颜色。单击的每个元素（下拉列表）都会更改此相同条形的颜色。但我不想要5个点击功能，我正在尝试其他方式，但直到现在，没有任何工作。谁能告诉我我做错了什么？

使用这段代码，控制台说“目标[i]不是一个功能......”我知道这是一种基本的，但我已经搜索和搜索过，似乎没有什么东西适合我。

var targets=['#first-img, #second-img, #third-img, #fourth-img, #fifth-img'];

   for(var i=0; i<targets.length; i++){
       targets[i].click(function(){
           $('#middle-bar').css('color','green');
           $('#middle-bar').css('color','black');
           //and so on...


       })
   }

编辑

好吧，使用这段代码我没有错误但没有任何反应，颜色不会改变

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img'];

   for(var i=0; i<targets.length; i++){
       $(targets[i]).click(function(){
           $('#middle-bar').css('color','green');
           $('#middle-bar').css('color','black');
       })
   }

编辑：

这是HTML：

        <div class="col-6 vertical-middle">
            <div class="text-left">
                <span class="font1 uppercase s22 white">Cook With</span>
            </div>

        </div>
        <div class="col-6 vertical-middle">
            <div class="text-right">

                <div class="dropdown-images" id="drop-img">
                    <img src="http://via.placeholder.com/50x30" alt="Nestlé">

                    <div class="custom-drop-images">

                        <img id="first-img" src="http://via.placeholder.com/50x30" alt="">
                       <img id="second-img" src=" first-img http://via.placeholder.com/50x30" onClick="" alt="">
                         <img id="third-img" src="http://via.placeholder.com/50x30" alt="">
                        <img id="fourth-img" src="http://via.placeholder.com/50x30" alt="">
                         <img id="fifth-img" src="http://via.placeholder.com/50x30" alt="">

                    </div>
                </div>

            </div>

        </div>


    </div>

目前的JS：

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img'];

for(var i=0; i<targets.length; i++){
    $(targets[i]).click(function(){
        $('#middle-bar').css('color','green');
        $('#middle-bar').css('color','black');
         $('#middle-bar').css('color','brown');
         $('#middle-bar').css('color','blue');
         $('#middle-bar').css('color','red');
    })
}

输出是奇数，条形图仍然不会改变，但我可以看到第二个图像背景变红......

Answer 1

我还没有真正研究过你的代码，但我看到的第一件事就是你的数组只有一个元素。您的单引号用逗号分隔值包装，因此您只有一个元素。

其次，您应该尝试$（targets [i]）。on（'click'，function（e）{// your code here}）;

目标[i]不是选择器。它只是一个字符串，而不是一个函数。您无法将事件附加到字符串。您需要将该字符串包装在$（targets [i]）中以使其成为有效的选择器函数。

希望有所帮助。

Answer 2

如果您的阵列是硬编码的并且不会改变，那么您可以这样做

$('#first-img, #second-img, #third-img, #fourth-img, #fifth-img').click(function(){
    //your code here
})

如果数组是动态填充的，那么它们需要是jQuery选择器，这就是为什么你得到target[i]不是函数错误。为此你可以做到这一点

$(targets[i]).click(function(){...

另外，你的数组只有一个元素，引号是整个事物，而不是每个元素

Answer 3

“好吧，使用这段代码我没有错误，但没有任何反应，颜色不会改变”

确保代码运行时DOM元素已存在。你可以保证你的

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img'];

通过将代码包装在（文档）中来存在

元素。就像这样：

$(document).ready(function(){

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img'];

for(var i=0; i<targets.length; i++){
    $(targets[i]).click(function(){
        $('#middle-bar').css('color','green');
        $('#middle-bar').css('color','black');
    })
}  
});

JQuery还建议你以这种方式使用.ON附加事件：

$('#elementID').on('click', function(e){   
     // your code here
});

Answer 4

我通过普通的JavaScript找到了一个更简单的解决方案：

<script type="text/javascript">
    function changeColor(color) {
        document.getElementById('middle-bar').style.background = color;
    }
</script>

然后，HTML：

 <img id="second-img" src=" first-img http://via.placeholder.com/50x30" onClick="changeColor('red');" alt="">

谢谢大家的帮助：）

jQuery：如何使用相同的单击函数触发不同的操作（使用不同的元素）

4 个答案: