jquery - jQuery将2个ID添加到相同的内容

Question

这是我到目前为止所拥有的。http://jsfiddle.net/Scybf/22/

$('[id^=content]').hide();
$('#baseSection, #headSection').on("click", "li", function () {
    var id = ($(this).parent().attr('id') == 'selectable') ? $(this).attr('id').replace('base', '') : $(this).attr('id').replace('head', '');
    $("#customContent").html($("#content-" + id).html());
});

我需要它做的是获取基地的 ID 并前往相同的内容。例如，base1 + head1 = content1 或 base1 + head 2 = content2。

任何帮助将非常感激。

Answer 1

如果您向每个列表添加一个公共类，您可以执行以下操作：

$('.selectable').on("click", "li", function () {
        var $li=$(this).addClass('selected')
        $li.siblings().removeClass('selected');
        var contentNum= this.id.replace( /\D/g,'')
        var $container= $li.closest('#headSection').length ? $('#headContent') : $('#baseContent');
        $container.html( $('#content-'+contentNum).html())

    });

演示：http: //jsfiddle.net/Scybf/20/

Answer 2

这可以帮助您：

您需要定义用户是否单击head或base元素：

function isBase(element){
    return element.parents('div').attr('id').indexOf('base') !== -1;
} 

function isHead(element){
    return element.parents('div').attr('id').indexOf('head') !== -1;
} 

然后你可以创建一个缓冲区对象：

var buffer = {head: null, base: null};

然后您只需要保存用户操作并将其显示在您的baseContent元素 中

$('#baseSection, #headSection').on("click", "li", function () {
    if (isHead($(this))) {
        buffer.head = $(this).text();
    } else if (isBase($(this))) {
        buffer.base = $(this).text();
    }

    $("#baseContent").html(
        "Head: " + buffer.head + "<br/>Base:" + buffer.base);
});