0

こんにちは皆さん、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);

は ：

ここに画像の説明を入力

誰もこれについて知っていますか？前もって感謝します..：）

4

3 に答える 3

1

同じ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; 
}
于 2012-07-24T05:36:42.847 に答える
1

最初に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の例です

于 2012-07-24T05:38:48.650 に答える
1

高さと幅は関数なので、 (中かっこに注意してください) のheight()代わりに呼び出す必要があります。代わりにこれを試してください。height

alert(this.width() + '-' + this.height());
于 2012-07-24T05:25:04.873 に答える