單擊特定圖像時更改div的css

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

您也可以嘗試

 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> 

Answer 6

為所有表示“ imgClass”的圖像提供一些類名，然后

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