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

是：

enter image description here

谁知道这个？在此先感谢.. :)

Answer 1

高度和宽度是函数，因此您需要调用height()而不是height（注意大括号），请尝试以下方法：

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

Answer 2

永远不要使用相同的ID

在您的HTML上，您正在使用<div id="expand_image"，这会导致问题，无法找到该元素。

参考 LIVE DEMO

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

它会起作用！ HERE IS A JSFIDDLE EXAMPLE

图像宽度高度jquery

3 个答案:

HTML：

JS：

CSS：