0

これが私がこれまでに持っているものです。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です。

どんな助けでも大歓迎です。

4

2 に答える 2

0

これはあなたを助けることができます：

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);
});
于 2013-02-11T14:02:48.730 に答える
0

各リストに共通のクラスを追加すると、次のようになります。

$('.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/

于 2013-02-11T14:26:06.980 に答える