Question

在下面的代码中，我动态创建了不同的帖子。每个帖子都有自己的形象。

$(function () {
    for(post in data){
        //get from the data post details

        var titleData = data[post]["title"];
        var descriptionData = data[post]["description"];
        var imageData = "images/"+data[post]["image"];
        //create elements with jquery
        var postHolder = $('<div class="post row"></div>');
        var img = $('<img src="'+imageData+'" data-title="'+titleData+'" class="col-sm-3 img-post">');
        var textHolder = $('<div class="col-sm-9"></div>');
        var title = $('<h4 class="title-post"></h4>').append(titleData);
        var description = $('<p class="explanation-post"></p>').append(descriptionData);


        textHolder.append(title);
        textHolder.append(description);

        postHolder.append(img);
        postHolder.append(textHolder);
        $('.posts-container').append(postHolder);


        img.on('click',function(){alert(this.data-title);});

    }


});

我希望当我点击图片时，它会提醒帖子的标题（＆＃39; s＆＃34; titleData＆＃34;）以及＆＃34; textHolder＆＃34;将他的背景颜色改为灰色。

对这一挑战的限制是：

传递一个不同的参数作为＆＃34; titleData＆＃34;每一次。
使用内存中的最小空间。

谢谢！

Answer 1

data-title是JavaScript中的无效标识符。要访问data-*属性，您可以使用HTMLElement.dataset

 alert(this.dataset.title)

OR，正如您使用的是jQuery .data()方法。

alert($(this).data("title"));

Answer 2

警报中的内容是错误的。

你在说

this.data MINUS title

如果名称中包含破折号，您可以使用括号表示法。

alert(this["data-title"]);

使用getAttribute

或更好

alert(this.getAttribute("data-title"));

或jQuery

alert($(this).data("title"));
alert($(this).attr("data-title"));

所以bg颜色变化的最终代码应为

img.on('click', function() {
    alert($(this).attr("data-title"));
    textHolder.css("background-color","#CCC");
    console.log(textHolder.css("background-color"))
});

将事件附加到动态创建的dom元素

2 个答案: