当点击一个特定的图像时更改div的css

我有三个图像并根据哪个图像被点击我想更改特定div的css。我只是不明白如何将点击图片连接到div。当点击一个特定的图像时更改div的css

下面是我认为它应该起作用的（坏）例子。我不明白如何在没有为每个图像/点击创建功能的情况下完成此操作。

$('.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：

<img id="content_img_1" src="images/conent_img1.jpg"/> 
<img id="content_img_2" src="images/conent_img2.jpg"/> 
<img id="content_img_3" src="images/conent_img3.jpg"/> 
<div id="content_1">This is div 1</div> 
<div id="content_2">This is div 2</div> 
<div id="content_3">This is div 3</div>

CSS：

#content_1{display:block;} 
#content_2{display:none;} 
#content_3{display:none;}

来源

2014-09-30 Denoteone

可以修改HTML？如果可以的话，你可以在每个图像中添加一个'data-'值和目标'div'的id，并为所有的应用相同的函数。 – 2014-09-30 02:36:50

我可以编辑html，并且将它添加到我的问题上面，它仍然缺失只隐藏其他两个div的css。你能给我一个简单的例子吗？谢谢！ – Denoteone 2014-09-30 02:38:04

我看到他们在准备jsfiddle时回答了7次。我想你不会需要我的答案，但这里是http://jsfiddle.net/u7hmfn74/ :) – 2014-09-30 02:43:00

您也可以尝试

var $contents = $('.content'); 
 
var $imgs = $('.circle_hiw_cont img').click(function() { 
 
    var $target = $('#content_' + this.id.replace('content_img_', '')).show(); 
 
    $contents.not($target).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="circle_hiw_cont"> 
 
    <img id="content_img_1" src="//placehold.it/64/ff0000" /> 
 
    <img id="content_img_2" src="//placehold.it/64/00ff00" /> 
 
    <img id="content_img_3" src="//placehold.it/64/0000ff" /> 
 
    <div id="content_1" class="content">This is div 1</div> 
 
    <div id="content_2" class="content">This is div 2</div> 
 
    <div id="content_3" class="content">This is div 3</div> 
 
</div>

来源

2014-09-30 02:41:00

谢谢先生，我能够将这个例子应用到我当前的脚本中，并且它的工作原理应该如何。 – Denoteone 2014-09-30 02:49:55

如果其中显示的div是预定义的，应该工作：

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

      } 
     } 
    );

来源

2014-09-30 02:38:37

您可以添加类的元素并使用index和eq方法：

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

注意：作为该解决方案是基于索引，所述的元件的事项顺序。

来源

2014-09-30 02:38:46 undefined

同样的想法，类，而不是ids会更安全的解决方案... – 2014-09-30 02:47:37

我喜欢这个答案，但它假设图像的数量和div的数量将是相同的，并正确排序;我们不知道 – 2014-09-30 02:50:51

问题是否属实。而且OP实际上选择了一个遵循相同思路的答案（如果是这种情况，我个人更喜欢你的答案） – 2014-09-30 03:01:05

你居然不是太离谱，this是要引用当前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 { 

      } 
     } 
    );

来源

2014-09-30 02:38:49

在函数调用上下文this指的是被点击的DOM元素。相反，您需要比较适当的属性。

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

     } 
    } 
);

来源

2014-09-30 02:38:54 Quantastical

-1

提供一些类名的所有图像说 “imgClass” 和

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

来源

2014-09-30 02:42:34

当点击一个特定的图像时更改div的css

回答

相关问题