0

ユーザーがのチェックボックスを含む"id=dot0001"テーブルで画像にカーソルを合わせると、が表示されます。ユーザーがチェックボックスをオンにすると、画像は同じIDの画像に置き換えられます。その部分は正常に機能し、ユーザーは必要なだけチェックとチェック解除を行うことができ、画像は正しく置き換えられます。問題：ユーザーが画像を離れた後、再び画像にカーソルを合わせると、テーブルが表示されません。id= "info0001"id="checkbox0001"id="dot0001"

ここで関数を定義します：

function makevisible(a){ 
    $("#tablespace").after(
        '<table  border="4" id="info'+a+'"class="info'+a+'">'+
        '<tr><td>Add to favorits</td><td><input name="" type="checkbox" id="checkboxinfo'+a+'" value=""></td></tr>')

        $("#info"+a).css("visibility", "hidden")

        $('#checkboxinfo'+a).change(function() {

        if($('#checkboxinfo'+a).is(':checked')){
    $('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')
        }
else{
    $('#dot'+a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot'+a+'" class="dot'+a+'">')  
    }   
    })

};

ここで私は関数を使用します：

$(document).ready(function() {
    $("#dot0002").hover(makevisible("0002"))
    })

これにより、HTMLに追加された後、テーブルが表示および非表示になります。

    $(document).ready(function() {

$("#dot0002").hover(
  function(){
    $("#info0002").css({"visibility":"visible"});
  },
  function(){
    $("#info0002").css({"visibility":"hidden"});
  }
);

$("#info0002").hover(
  function(){
    $(this).css({"visibility":"visible"});
  },
  function(){
    $(this).css({"visibility":"hidden"});
  }
);
});

ここにフィドルがあります：http：//jsfiddle.net/QzX9C/

問題は、IDに関連付けられた画像が置き換えられた後、jQueryが画像を見つけられないことだと思います。

助けていただければ幸いです。

4

1 に答える 1

1

要素を DOM に動的に追加するため、Hover関数は新しい要素に関連付けられません。

これ：

$("#dot0002").hover(
function () {
    $("#info0002").css({"visibility": "visible"});
},
function () {
    $("#info0002").css({"visibility": "hidden"});
});

次のコード行によって DOM に動的に挿入されるため、画像には添付されません。

$('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')

ホバートリガーを .change() 関数に追加して再接続しない限り

$('#checkboxinfo' + a).change(function () {
    if ($('#checkboxinfo' + a).is(':checked')) {
        $('#dot' + a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot' + a + '" class="dot' + a + '">')
    } 
    else {
        $('#dot' + a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot' + a + '" class="dot' + a + '">')
    }

    //Add this code at the end to reattach the hover event on the newlly injected image
    $('#dot' + a).hover(
    function () {
        $("#info" + a).css({"visibility": "visible"});
    },
    function () {
        $("#info" + a).css({"visibility": "hidden"});
    });
})

これが更新されたフィドルです：リンク...

于 2013-01-29T04:09:09.710 に答える