jquery - jQuery - 插入多个按钮的单击文本值

Question

这是我一直在为概念验证而努力的小提琴。

我想要实现的是当从底部容器单击按钮时，我想在顶部菜单导航下方指示单击按钮的文本值，例如面包屑路径，以使用户知道单击了哪些按钮。

目前我找不到可以分支和过滤那些按 id 或类单击的 jQuery 函数，因此我可以将这些单击的文本值附加到顶部菜单导航下方的正确位置。

对我来说，另一个具有挑战性的部分是堆叠所有被点击的按钮值，而不是一次只显示一个按钮值，以防用户点击多个按钮。这是为了让用户友好地指示他们在生产站点上的页面的完整路径。根据 jQuery 文档，有类似的功能，append() push()但我想它们的用法并不是我想要完成的。

- 编辑了我的问题并添加了插图

Answer 1

我不太确定你在追求什么，但我认为它是这样的：

$("div.jc > button.btn").click(function () {
    var text = $(this).text();
    $("#jc").html(text);
});

$("div.date > button.btn").click(function () {
    var text = $(this).text();
    $("#date").html(text);
});

$("div.jp > button.btn").click(function () {
    var text = $(this).text();
    $("#jp").html(text);
});

$("div.ws > button.btn").click(function () {
    var text = $(this).text();
    $("#ws").html(text);
});

http://jsfiddle.net/L2Ssq/18/

Answer 2

您要做的是将某种识别属性附加到按钮上，以便您确定目标是什么。我选择的方法是添加具有适当目标 ID 作为值的自定义数据属性。然后，在 click 事件处理程序中，我将自定义数据属性值作为新的 jquery 选择器传递，以选择我们想要将文本附加到的正确 DOM 元素。

这里的工作示例。

重要代码：

//An example button with the custom data attribute with a target as its value
<button class="btn" data-target="forDate">Today</button>

//The modified click event 
$("button").click(function () {
    var text = $(this).text();
    var target = '#' + $(this).data().target;
    $(target).html(text);
});

编辑

如果您想在单击按钮时堆叠按钮值，您可以这样做。

Answer 3

看看这里：http: //jsfiddle.net/L2Ssq/25/

您需要向按钮部分添加一些类，并进行一些格式化

$("button").click(function () {
    btn = $(this);
    btn.parent().children().removeClass('clicked');
    btn.addClass('clicked');

    $("#forDate").text( $('.btns-date > .btn.clicked').text() );
    $("#forJC").text( $('.btns-job-cat > .btn.clicked').text() );
    $("#forJP").text( $('.btns-job-pri > .btn.clicked').text() );
    $("#forWS").text( $('.btns-wf-status > .btn.clicked').text() );
});