1

我正在设计一个网站，它就像带有贴纸的公告板。所以每个贴纸都有一个关闭按钮。但是我找不到用户单击关闭按钮的贴纸的 ID。

stickerId = 1;
function createSticker(jsonNewSticker){     // receives json

    str = "<b>Email:</b> "+ jsonNewSticker.email+ 
    "</br> <b>Title:</b> "+ jsonNewSticker.title+
    "</br> <b>Summary:</b> "+ jsonNewSticker.summary+
    "</br> <b>Description:</b> "+ jsonNewSticker.description +
    "</br> <b>Entry expires: </b>" + jsonNewSticker.expiration_date;

    $("#mainForSticks").prepend("<div id= seq-"+ stickerId +" ></div>");
    $("#seq-"+ stickerId).attr("class","sticker");      
    $("#seq-"+ stickerId).html(str);

    $("#seq-"+ stickerId).append("<div id=report><a class=link href=javascript:reportCounter()>Report</a></div>"); // report  
    $("#report").attr("class","reportText");

    $("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker()><b>X</b></a></div>"); // delete 
    $("#deleteSticker").attr("class","delSticker");
    //currentId = $(this).attr('id');
    stickerId++;

}

所以这里每个贴纸都有一个id：seq-1 seq-2 seq-3 ...

function deleteSticker(){
    // how can I get id of specific sticker
}
4

5 回答 5

2

贴纸相对于关闭按钮，因此您并不需要 ID。我只是使用closest()方法和适当的选择器。

但是，无论您是否需要 ID，我都会在此处的贴纸关闭按钮上放置一个动态处理程序。您可以根据需要添加任意数量的贴纸。这使您的内联 javascript 调用javascript:anything过时，使代码更易于维护。

这里的处理程序使用 deleteSticker 作为其回调，但您可以在其中做任何您想做的事情，包括获取 ID（我在警报中显示）或删除贴纸等。

带有颜色的贴纸的奖励积分？:D

小提琴

var deleteSticker = function(){
    var sticker = $(this).closest('[id^="seq"]');
        alert("your sticker # is: "+sticker.attr('id'));
    sticker.remove();
}

$('#mainForSticks').on('click', 'a', deleteSticker);
于 2013-05-16T02:32:50.580 回答
1

您可以在函数中传递 IddeleteSticker并像这样使用它

function deleteSticker(item){
 var element=document.getElementById(item)
}

并像这样添加这个功能

var elementId="seq-"+ stickerId;
$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker(elementId)><b>X</b></a></div>"); // delete
于 2013-05-16T02:06:43.040 回答
0

您可以通过两种方式实现这一目标。

第一种方法是将参数传递给它，例如：

$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker(" + stickerId +")><b>X</b></a></div>"); // delete 

function deleteSticker(ID){
    var x = $("#" + ID);
}

第二种方式是从选择器开始，例如：

$(function(){
    $('div[id^="#seq-"]').click(function(){
       // here is your click.
    });
});
于 2013-05-16T02:09:05.397 回答
0

改变

$("#seq-"+ stickerId).attr("class","sticker");      
$("#seq-"+ stickerId).html(str);

$("#seq-"+ stickerId).append("<div id=report><a class=link href=javascript:reportCounter()>Report</a></div>"); // report  
$("#report").attr("class","reportText");

$("#seq-"+ stickerId).append("<div id=deleteSticker><a class=link href=javascript:deleteSticker()><b>X</b></a></div>"); // delete 
$("#deleteSticker").attr("class","delSticker");

对此：

$("#seq-"+ stickerId)
    .attr("class","sticker")
    .html(str)
    .append("<div id='report' class='reportText'><a class=link href='#'>Report</a></div>") // report  
    .append("<div id='deleteSticker' class='delSticker'><a class=link href='#'><b>X</b></a></div>"); // delete

将此代码添加到函数之外，在 jQuery 中$(document).ready({，即：

$(document).ready({
    $('body').on('click', '.delSticker', function() {
        deleteSticker(this);
    });
});

然后，将您的更改deleteSticker()为：

function deleteSticker(elem) {
    $(elem).parents('.sticker').remove();
}
于 2013-05-16T02:10:35.273 回答
0

这是数据属性的好地方。它们允许不显眼的 JavaScript 并且不依赖文档结构（例如，寻找最接近的匹配元素）。

演示：http: //jsfiddle.net/EN5Ht/2/

我建议在生成删除按钮时添加关联项的 ID。

createSticker()附带说明一下，如果您多次调用，您可能会分配重复的 ID（“report”和“deleteSticker”） 。ID 必须是唯一的。

示例 HTML

<button data-role="delete-button" data-id="seq-1">Delete</button>
<button data-role="delete-button" data-id="seq-2">Delete</button>
<button data-role="delete-button" data-id="seq-3">Delete</button>

<div id="seq-1">Item 1</div>
<div id="seq-2">Item 2</div>
<div id="seq-3">Item 3</div>

请注意，没有内联 JavaScript，我们为每个元素添加了 adata-role和 a 。data-id删除按钮可以是您想要的任何元素；它们可以位于文档中的任何位置。

JavaScript

$("body").on("click", "[data-role='delete-button']", function(){
    var button = $(this);
    $("#" + button.data("id")).remove();
});

然后，我们在被指定为删除按钮的匹配元素（现在或以后动态添加）上侦听所有单击事件。

当事件被触发时，我们检索负责的按钮并获取其data-id属性的值。这告诉我们相关的元素，然后可以根据需要隐藏/删除。

于 2013-05-16T03:22:47.107 回答