1

for ループ内で div を生成する jquery コードがあります。div は "id"+index(index++ 内のループ) と同じように ID を取得し、別の div 内に追加されます。すべてが期待どおりに機能しますが、生成された div のいずれかをマウスオーバーまたはクリックするたびに関数を作成したいと考えています。div は同時に表示され、div の量は一定ではありません。div の id について知っているのは "id"+index だけなのですが、どうすれば div を直接選択できますか?

div を生成するコードは次のとおりです。

NUM2 = NUM;
for(i = 0;NUM2>0;i++,NUM2--)
    {
    $("#imageBox").clone().attr('id',"imageBox"+NUM2).prependTo(DIV);
    $('#imageBox'+NUM2).css({
        backgroundImage:"url('pic')"
        backgroundRepeat:'no-repeat',
        backgroundSize:'contain',
        width:'100px',
        height:'100px',
        margin:'4px',
        float:'left',
    });

ループを作成し、「id」+index をループのインデックスでチェックすることを考えましたが、うまくいきません。これが私が試したことです：

for(i=0;i<NUM;i++)
    {
    if($('#imageBox'+NUM).attr('id') = '#imageBox'+i)
        {
            $('#imageBox'+NUM).mouseenter(function()
                    {
                        $(this).css(
                            {
                                opacity:1,
                                border: '1px solid white',
                            });
                    });
            $('#imageBox'+NUM).mouseleave(function()
                    {
                        $(this).css(
                            {
                                opacity:0.6,
                                border: '0px solid white',
                            });
                    });

            $('#imageBox'+NUM).click(function()
                    {
                        alert("test");
                    });
        }
    }

あなたが私を助けてくれることを願っています

乾杯

4

4 に答える 4

1

div を作成している場合は、後でキーオフできる共通のクラスまたはデータ属性をそれらに与えることができます。たとえば、すでに明示的に CSS を設定していますが、imageClass という名前の CSS クラスがある場合は、CSS ファイルでこれらのプロパティを 1 回設定するだけで、すべてのクローンが適切なスタイルになります。

次に、css クラス $(".imageBox") からクリック、マウス エンター、マウス リーブ イベントをキー入力し、'NUM' 変数値をデータ属性に入れることで、$(this).data( を実行できます。 'Num') を使用して、イベントで使用していた DIV を特定します (必要な場合)。

于 2013-10-16T19:35:47.050 に答える
0

div を作成するときに、click および mouseleave ハンドラーを割り当てることもできます

 var imgBox= $("#imageBox").clone().attr('id',"imageBox"+NUM2)
                         .mouseleave(function () 
                         {
                            $(this).css({
                                         opacity: 0.6,
                                         border: '0px solid white',
                                       });
                         })
                         .click(function () {
                                            alert("test");
                                            });

 imgBox.prependTo(DIV);
于 2013-10-16T19:44:01.300 に答える
0

ハンドラを個別に設定する必要はありません。div にクラスを与え、委譲でイベント ハンドラーを使用します。

$(document).on({
    mouseenter: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid blue'
        });
    },
    mouseleave: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white'
        });
    },
    click: function () {
        alert('hi');
    }
}, '.imagebox');
于 2013-10-16T19:35:38.457 に答える
0

を使用してid

imageBox+を選択することはできませんが、属性接頭辞セレクターを使用して始まる<num>ことを確認することで、十分に近づけることができます。idimageBox[attr^=val]

$('[id^=imageBox]')
    .mouseenter(function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white',
        });
    })
    .mouseleave(function () {
        $(this).css({
            opacity: 0.6,
            border: '0px solid white',
        });
    })
    .click(function () {
        alert("test");
    });

を使ってclass

ただし、理想的には、imageBoxクラスを各要素に追加して、セレクターを簡素化し、パフォーマンスを向上させ、コードをより適切にする必要があります。

$('.imageBox')

これは両方のアプローチのデモです。

クラスを使用するときに番号を保持する必要があり、要素のインデックスに依存できない場合は、それを「data-」属性に追加するのが理想的です。

<div class="imageBox" data-number="2">...</div>

ホバーイベントのCSS

mouseenterandイベントが純粋に文体上の理由によるものである場合は、代わりにmouseleaveCSS and を使用することをお勧めします。:hoverこのアプローチのもう 1 つの利点は、要素の初期状態 (部分的に透明) が正しいことですが、意図したとおりに機能させるには JS を調整する必要があります。

.imageBox {
  opacity: 0.6;
  border: 0px solid white;
}
.imageBox:hover {
  opacity: 1;
  border: 1px solid white;
}
于 2013-10-16T19:37:11.957 に答える