2016-11-10 1 views
0

モーダルでwikipediaをロードしていますが、ロードされると、マウスの任意の要素の背景色を変更したいと思います。以下のコードはホバー機能を適用しますが、機能しません。jsのホバー経由で外部コンテンツを読み込んでCSSを適用するには?

ページがロードされ ホバーしたら任意の要素とその背景には、以下の コードごとに変更する必要があり,,結果をクリックし、ボタンのウィキペディアをクリックしてください - JSFiddle playground

$("#wiki").one('click', function(e) { 
     var articleName = $(this).data('subject'); 
     $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", { 
      srsearch: articleName, 
      action: "query", 
      list: "search", 
      format: "json" 
     }, function(data) { 
      $("#results ul").empty(); 
      $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text(); 
      $.each(data.query.search, function(i, item) { 
       $("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>"); 
       $("#results div a").attr("href", "#"); 
      }); 
      $('.modal').on('show.bs.modal', function (e) { 
       $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", { 
        page: $(e.relatedTarget).find('h4').text(), 
        prop:"text" 
       }, function(data) { 
        var markup = data.parse.text["*"]; 
        var blurb = $('<div></div>').html(markup); 
        blurb.find('a').each(function() { 
         $(this).replaceWith($(this).html()); 
        }); 
        blurb.find(".mw-editsection, #toc, .noprint, .thumb, img").remove(); 
        $(".modal-header .modal-title").html(articleName); 
        $(".modal-header .modal-title").promise().done(function(){ 
         $(".modal-title").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}); 
        }); 
        $(".modal-body").html($(blurb)); 
        $(".modal-body").promise().done(function(){ 
         $(".modal-content").html(data.parse.text['*']); 
         saveWiki(); 
        }); 
       }); 
      }); 
     }); 
    }); 
    function saveWiki() { 
     $('.modal-body').find().children().on("mouseover", function() { 
     $("this").css("background-color", "yellow"); 
     }); 
    }; 
+0

あなたのフィドルはここに示されているのと同じコードではありません – caramba

+0

@caramba申し訳ありませんが、より複雑なコードの一部であり、私は質問を投稿している間、ちょうどフィドルをチェックしていました。まだヘルプが必要です、ありがとう –

答えて

0

解決策は、コードの下部にある機能を変更することでした:

function saveWiki() { 
    $(".modal-content *").on("mouseenter", function() { 
    $(this).css("background-color", "yellow"); 
    }).mouseout(function(){ 
    $(this).css("background-color", "white"); 
    }); 
}; 
関連する問題