Question

我有三张图片，根据点击的图片，我想更改特定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：

<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;}

Answer 1

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

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

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

Answer 2

如果预定义了哪个div，那应该有效：

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

            }
        }
    );

Answer 3

你实际上并不太远，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 {

            }
        }
    );

Answer 4

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

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

        }
    }
);

Answer 5

您也可以尝试

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

为所有图片提供一些类名称“imgClass”和

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

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

6 个答案: