3

私はこの小さなものを持っています: http://jsfiddle.net/7hqyq/

そして、私はjQueryが初めてなので、選択した正方形の背景色を変更する方法を知りたいです(したがって、ページをロードする最初の正方形の)。詳細 div のコンテンツ テキストをフェードイン/フェードアウトする方法。

前もって感謝します ;）

HTML:

<div class="square" contentId="c1"></div>
<div class="square" contentId="c2"></div>
<div class="square" contentId="c3"></div>
<div class="square" contentId="c4"></div>

<div id="details">Content for div 1</div>

<div style="display: none" id="c1"> Content for div 1</div>
<div style="display: none" id="c2"> Content for div 2</div>
<div style="display: none" id="c3"> Content for div 3</div>
<div style="display: none" id="c4"> Content for div 4</div>

CSS:

.square{
width: 80px;
height: 80px;
margin: 10px;
float: left;
background: #CCC;
}

#details{
width: 380px;
height: 100px;
margin: 10px;
float: left;
background: #999;
}

jQuery:

$(".square").on("click", function() { 
    var id= $(this).attr("contentId");
    $("#details").html($("#" + id).html());
});
4

4 に答える 4

1

必要なのはこれだけです:
ライブデモ

function fader(i){
    $('#details >div').stop().fadeTo(400,0)  // All
    .eq(!i?i:$(this).index()).fadeTo(400,1); // indexed one
}

$(".square").on("click", fader );

faderインデックス番号に渡すことで、要素のフェードをすぐに呼び出すこともできますie: fader(0);(デモを参照)

この単純化された HTML マークアップを持つ:

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div id="details">
    <div> Content for div 1</div>
    <div> Content for div 2</div>
    <div> Content for div 3</div>
    <div> Content for div 4</div>
</div>

そしてこのCSS：

.square{
    width: 80px;
    height: 80px;
    margin: 10px;
    float: left;
    background: #CCC;
    cursor:pointer;
}
#details{
    width: 380px;
    height: 100px;
    margin: 10px;
    clear:both;
    float: left;
    background:#999;
}
#details > div{
    position:absolute;
    width: 380px;
    height: 100px;
    display:none;
}

ところでcontentId、無効な属性です。属性に行くよりもカスタム属性を本当に処理する必要がある場合data-*。

于 2013-10-21T23:27:51.740 に答える
1

これをチェックして。テキストを変更するだけで背景がフェードすることはありません: http://jsfiddle.net/7hqyq/2/

$('.square:first').css('background-color', 'red');
$(".square").on("click", function() { 
var id= 'Content for div ' + $(this).attr("contentId");
$('#details').fadeOut(function(){
    $(this).text(id).fadeIn();
})
});

また、背景色を赤に設定し、クリックした div に応じて変更するようにしました。（そうですか？）

于 2013-10-21T22:56:50.983 に答える
0

これは機能します：

$(".square").on("click", function() { 
    var id= $(this).attr("contentId");
    $(this).css('background','red');
    $('#details').fadeOut('slow', function() {
      $(this).html($("#" + id).html()).fadeIn('slow');
    });
});

JSFiddle: http://jsfiddle.net/EFbtj/

これにより、灰色の背景もフェードアウト/フェードインすることに注意してください。それを防ぎたい場合は、背景を持つラッパー div で div をラップします。

また、$(this).css('background','red');背景にインライン css を追加する代わりにクラスを使用する場合は、 $(this).addClass('yourClassName');` に置き換えることができます。

于 2013-10-21T22:51:39.250 に答える