Question

我正在设计一个网站，就像公告板上贴有贴纸一样。所以每个贴纸都有一个关闭按钮。但我找不到贴纸的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
}

Answer 1

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

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

此处的处理程序使用deleteSticker作为其回调，但您可以在其中执行任何操作，包括获取ID（我在警报中显示）或删除标签等。

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

Fiddle

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

$('#mainForSticks').on('click', 'a', deleteSticker);

Answer 2

您可以在deleteSticker函数中传递ID，并像这样使用

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

Answer 3

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

第一种方式是将参数传递给它：

$("#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);
}

第二种方式是starts with selector，如：

$(function(){
    $('div[id^="#seq-"]').click(function(){
       // here is your click.
    });
});

Answer 4

更改

$("#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();
}

Answer 5

这是data attributes的好地方。它们允许不引人注目的JavaScript，并且不依赖于文档结构（例如，寻找最接近的匹配元素）。

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

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

作为旁注，如果您多次拨打createSticker()，可能会分配重复的ID（“报告”和“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，我们在每个元素中添加了data-role和data-id。删除按钮可以是您想要的任何元素;它们可以位于文档中的任何位置。

<强>的JavaScript

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

然后我们会监听匹配元素上的所有点击事件（现在，或稍后动态添加），这些事件被指定为删除按钮。

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

如何获取特定元素的id

5 个答案:

Fiddle