Javascript 单击特定图像时更改div的css

我有三张图片，根据点击的图片，我想更改一个特定div的css。我只是不知道如何将图片点击连接到div

下面是我认为它应该如何工作的一个（糟糕的）例子。如果不为每个图像/单击创建函数，我不理解这是如何实现的

 $('.circle_hiw_cont img').click(
        function() {
            if(this == content_img_1.jpg) {
                  $("#content_1").css("display", "block");
                   $("#content_2").css("display", "none"); 
                  $("#content_3").css("display", "none");
            } else {

            }
        }
    );

HTML:

---

如果显示哪个div是预定义的，则应该可以：

 $('.circle_hiw_cont img').click(
        function() {
            if( $(this).attr('src') === "content_img_1.jpg") {
                  $("#content_1, #content_2, #content_3").toggle();
            } else {

            }
        }
    );

---

您可以向元素添加类，并使用

索引

和

eq

方法：

var $img = $('.img').on('click', function() {
   $('.div').hide().eq( $img.index(this) ).show();
});

---

请注意，由于此解决方案是基于索引的，因此元素的顺序很重要

您实际上离得不远，

这将引用当前的DOM节点，而不是代码假定的图像的src：

$('.circle_hiw_cont img').click(
        function() {
            if(this.src == "content_img_1.jpg") {
                  $("#content_1").css("display", "block");
                   $("#content_2").css("display", "none"); 
                  $("#content_3").css("display", "none");
            } else {

            }
        }
    );

函数调用中的上下文
this
引用了单击的DOM元素。您将需要比较相应的属性

$('.circle_hiw_cont img').click(
    function() {
        var $this = $(this);
        if($this.attr('href') == 'content_img_1.jpg') {
              ...
        } else {

        }
    }
);

你也可以试试


var$contents=$（'.content'）；
var$imgs=$（'.circle\u hiw\u cont img'）。单击（函数（）{
var$target=$（'#content'+this.id.replace（'content#img'，''）.show（）；
$contents.not（$target.hide（）；
});

我是第一组
我是二组
我是第三组
为所有图像提供一些类名，比如“imgClass”和

你能修改HTML吗？如果可以，您可以在每个图像中添加一个
数据-
值，其id为目标
div
，并为allI应用相同的函数。我可以编辑html，我将其添加到上面的问题中。它仍然缺少css，只是隐藏了其他两个div。你能给我举个简单的例子吗？谢谢我看到他们在我准备JSFIDLE时回答了7次。我想你不需要我的回答，但在这里：）谢谢你的信息。谢谢大家的回答。我将很快做一些测试。谢谢你，先生，我能够在我当前的脚本中实现这个示例，它的工作方式与它应该的工作方式完全相同。我喜欢这个答案，但它假设图像的数量和div的数量将是相同的，并且排序正确；我们不知道这个问题是否属实。OP实际上选择了一个遵循同样思路的答案（如果是这样的话，我个人更喜欢你的答案）
$('.circle_hiw_cont img').click(
        function() {
            if(this.src == "content_img_1.jpg") {
                  $("#content_1").css("display", "block");
                   $("#content_2").css("display", "none"); 
                  $("#content_3").css("display", "none");
            } else {

            }
        }
    );

$('.circle_hiw_cont img').click(
    function() {
        var $this = $(this);
        if($this.attr('href') == 'content_img_1.jpg') {
              ...
        } else {

        }
    }
);

 $('.imgClass').click(
    function() {
              $("#content_1").css("display", "block");
               $("#content_2").css("display", "none"); 
              $("#content_3").css("display", "none");
                }
 );