-1

このスクリプトは新しい要素を作成し、正しい ID を与えますが、以下の HTML/文字列には読み込まれません:

<script>
$(function () {
    $("#test img").on("click", function (e) {
        var titleEl = document.createElement("div");
        var laptopImg = $("#test img");
        var theText = "<p>this is a test</p>"
        document.body.appendChild(titleEl);
        titleEl.id = "img-title";
        titleEl.html = theText;
        titleEl.position = laptopImg.position;
    });
});
</script>
<style>
#img-title {
    color:black;
    z-index:1;
}
#test img {
    position: absolute;
    transform: scale(1,1);
    -moz-transition-duration: 2s;
}
#test img:hover {
    transform: scale(.5,.5);
    -moz-transition-duration: 2s;
}
#test img:active {
    -moz-transform:skew(360);
    -moz-transition-duration: 2s;
}
</style>
<div id="test">
    <%= image_tag('test_2.jpg') %>
</div>

.val .appendChild などのさまざまな機能を試しましたが、機能していないようです。画像をクリックするたびに、新しい空の div が作成されます。

4

2 に答える 2

2

生のソリューションとして、 innerHTMLを使用する必要があります

$(function() { 
    $("#test img").on("click", function(e) {

        var titleEl = document.createElement("div");
        var laptopImg = $("#test img");
        var theText = "<p>this is a test</p>"
        document.body.appendChild(titleEl);
        titleEl.id = "img-title";
        titleEl.innerHTML = theText ;
        titleEl.style.position = laptopImg.css('position'); 

    });

});

デモ:フィドル

jQuery風のソリューションは

$(function () {
    var $laptopImg = $("#test img").on("click", function (e) {
        var theText = "<p>this is a test</p>"
        $div = $('<div />', {
            id: 'img-title',
            position: $laptopImg.css('position'),
            html: theText
        }).appendTo('body')
    });
});

デモ:フィドル

注: 複数のクリックが行われた場合は、ID が重複していないことも確認する必要があります。

于 2013-09-09T23:54:02.710 に答える
0

このスニペットは div を追加する必要があります

$(function() { 
    $("#test img").on("click", function(e) {
        var laptopImg = $("#test img");

        $('<div id="img-title"><p>this is a test</p></div>')
            .appendTo(document.body)
            .css('position', 'absolute')
            .offset(laptopImg.offset());
    });
});
于 2013-09-09T23:56:37.480 に答える