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

Question

这是fiddle我一直致力于概念验证。

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

目前我找不到可以分支和过滤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元素。

Working example here.

重要代码：

//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);
});

修改

如果您想要点击按钮值，可以{@ 3}}。

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