圖片寬度高度jQuery

Question

大家好，我希望圖像在jquery中展開和折疊，所以這是我的代碼...

 <div id="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>

下面是css樣式

 #expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }  

jQuery代碼如下

  $(function() {
   $("#expand_image ").click(function() {

     var imgwidth = this.width;
     var imgheight = this.height;
    $a=300;
    $b=this.height;
      alert(this.width + 'x' + this.height);



      if ($a==$b )
    {
    alert('300');
       $(this).css('height', '100');
       $(this).css('width', '580');   
    }
    else
    {
      alert('100'); 
       $(this).css('height', '300');
       $(this).css('width', '580'); 
    }       
    });
    });     

所以我想要的是..當我單擊一個圖像時，它應該展開而其他圖像應該折疊..而如果我單擊擴展圖像，它應該折疊

所以我試圖獲得圖像的高度

因此，如果它的300然后崩潰，則展開

但是輸出

alert(this.width + '-' + this.height);

是：

有人知道嗎？ 提前致謝..：）

Answer 1

height和width是函數，因此您需要調用height()而不是height （注意括號），請嘗試以下方法：

alert(this.width() + '-' + this.height());

Answer 2

切勿使用相同的ID

在HTML上，您正在使用<div id="expand_image" ，這將導致查找元素的問題。

請參考現場演示

HTML：

<div class="expand_image" style="border-top:1px solid #000">
    <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
</div >
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>

JS：

$(function() {
    $(".expand_image").click(function() {
        $(this).css({
            'height':'300',
            'width':'580'
        });
        $(".expand_image").not(this).css({
            'height':'100',
            'width':'580'
        });
    });
});

CSS：

.expand_image { 
    overflow:hidden; 
    float:left; 
    height:100px; 
    margin:0 5px; 
    border-bottom: 1px solid #000; 
    cursor:pointer; 
}  

Answer 3

首先將div放入包裝器中，然后按類而不是id引用它們……因為您具有相同的id，這將避免沖突：

<div id="wrapper"> 
<div class="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>​

通過將其放入div包裝器中，您不必啟動expand_image類的每個實例，因此此代碼將更好地執行：

$("#wrapper").on("click", ".expand_image", function () {
    if ($(this).height() == 300) {
       $(this).css('height', '100'); 
    } else {
       $(".expand_image").css('height', '100'); 
       $(this).css('height', '300');   
    }   
});    

通過將#expand_image更改為.expand_image來更新CSS

.expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; } ​

它會工作！ 這是一個JSFIDDLE示例