单击另一个锚点标记时，从锚点标记获取字符串值

get string value from anchor tag, when another anchor tag is clicked

本文关键字：获取 字符串 另一个 单击      更新时间：2024-04-07

我有一个<ul>，它动态添加了<li>，同时还在数组中存储了一个字符串。当我单击"删除"图像时，我需要删除数组中的<li>和字符串。

这就是我向<ul>和数组添加字符串的方式：

function addTab() {
        tabs.append('<li class="navHighlight">' + '<a href="#">' + title + '</a>' + '<a href="#">' + '<img src="images/delete.png" class="deleteImage"/>' + '</a>' + '</li>');
    };
var found = jQuery.inArray(title, titles);
    if (found >= 0) {       
    } else {        
        titles.push(title);
        addTab();
    }

这就是我试图删除它们的方式：

$("body").on("click", ".deleteImage", function(e) {
    removeItem = $(this).closest('li a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function(value) {
      return value != removeItem;
    });
    removeTab();
});    
function removeTab() {
    $(this).closest('.macTypeNav li').remove();
}

我可以很好地添加<li>和字符串值，但当我尝试删除它们时，什么也不会发生。事件从单击侦听器中激发；然而，removeItem变量没有被设置并且<li>没有被移除。

我希望避免在添加每个<a>时给它们一个id，但我并不反对以某种方式添加一个允许我引用它们的类。

任何想法都是受欢迎的，我相信这可能相当简单，但我今天就要结束了，我现在一辈子都无法思考这个问题。

使用DOM；它很神奇。还有实参数，因为全局变量不是传递参数的合适方式。

var titles = [];
function addTab(title) {
    var newTab = $("<li>", { "class": "navHighlight" });
    newTab.append($("<a>", { href: "#", text: title }));
    newTab.append($("<img>", { src: "images/delete.png", "class": "deleteImage" }));
    newTab.data("title", title);
    newTab.appendTo(tabs);
    titles.push(newTab[0]);
}
$("body").on("click", ".deleteImage", function(e) {
    var remove = $(this).closest("li");
    titles.splice(titles.indexOf(remove[0]), 1);
    remove.remove();
});

removeTab中的this不涉及delete元素

$("body").on("click", ".deleteImage", function (e) {
    var removeItem = $(this).closest('li').find('a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function (value) {
        return value != removeItem;
    });
    removeTab(this);
});
function removeTab(del) {
    $(del).closest('li').remove();
}

演示：Fiddle

或使用.call（）将自定义执行上下文传递给removeTab方法

$("body").on("click", ".deleteImage", function (e) {
    removeItem = $(this).closest('li').find('a').text();
    console.log(removeItem);
    titles = jQuery.grep(titles, function (value) {
        return value != removeItem;
    });
    console.log(titles)
    removeTab.call(this);
});
function removeTab() {
    $(this).closest('li').remove();
}

演示：Fiddle

相关文章：