jquery - 使用 jQuery 获取 2 个 ID 并显示自定义内容

Question

我是 jQuery 新手，我知道这个问题可能看起来很愚蠢。但是，这是我到目前为止所拥有的...... http://jsfiddle.net/jHyJu/

$('[id^=content]').hide();
$('#baseSection').delegate("li", "click", function() {
var id = $(this).attr('id').replace('bcontent','');
$("#baseContent").html($("#content-"+id).html());
});

$('[id^=content]').hide();
$('#headSection').delegate("li", "click", function() {
var id = $(this).attr('id').replace('hcontent','');
$("#headContent").html($("#content-"+id).html());
});

我需要脚本来组合单击的 ID，以便显示自定义内容。

Answer 1

    $('[id^=content]').hide();
    $('#baseSection, #headSection').delegate("li", "click", function() {
    var id = $(this).attr('id').replace('bcontent','').replace('hcontent','');
    $("#baseContent, #headContent").html($("#content-"+id).html());
    });

试试这个。

Answer 2

您可以使用

   $('#baseSection, #headSection').delegate 

并保持所有代码相同，除了以下几行

var id = $(this).attr('id').replace('hcontent','');
var id = $(this).attr('id').replace('bcontent','');

在这里，您可以将“hcontent/bcontent”作为元素的属性，并可以使用它

$(this).attr('<attribute name>')

并用作变量

Answer 3

利用ternary operator：http://jsfiddle.net/jHyJu/1/

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

并.on()改用if you are using jquery version 1.7+