Question

我有一个页面，我在创建多个按钮，当您单击它们时，它会更改另一个区域的html。一大块jquery的例子显示了我想说的内容。

$( "#bbone" ).click(function() {

$('#a').html( '<span>This is a first sample 1<\/span>' );
$('#b').html( '<span>This is a second sample 1<\/span>' );
$('#c').html( '<span>This is a third sample 1<\/span>' );

});

我这里也有一个jsfiddle。 http://jsfiddle.net/baxj2h49/3/

我只知道有更好的方法来编写这个，但考虑到每个的所有html都可以不同。我不知道怎么样。任何正确方向的推动都会有所帮助

Answer 1

如果没有来自OP的充分信息（可扩展性，目的等），并且没有关于被替换内容的哪一部分应该是静态的还是动态的进一步信息，我的答案仅旨在复制所观察到的行为在OP的原始小提琴中。

如果唯一的区别是每个字符串末尾的数字，您只需将该数字存储在HTML5 data-属性中，并使用通用点击事件。标记可以更新如下：

<div class="cont">
    <div class="button"><</div>
    <div class="third">
        <ul class="bbul">
        <li id="bbone" data-value="1">ONE</li>
        <li id="bbtwo" data-value="2">TWO</li>
        <li id="bbthree" data-value="3">THREE</li>
        </ul>
    </div>
    <div class="doub">
        <div id="a"><span>This is a first sample</span> <span class="value"></span></div>
        <div id="b"><span>This is a second sample</span> <span class="value"></span></div>
        <div id="c"><span>This is a third sample</span> <span class="value"></span></div>
    </div>
</div>

请注意，我插入了一个空的span，可以在不更新<span>元素的整个内容的情况下插入数值。

对于你的jQuery，它可以简化为3行：

$('.bbul li').click(function() {
    $('.doub div .value').html($(this).attr('data-value'));
});

请参阅此处的概念验证小提琴：http://jsfiddle.net/baxj2h49/4/

Answer 2

嗨我有点在jsfiddle中做出修改： http://jsfiddle.net/mdhilwan/baxj2h49/5/

$( ".bbul li" ).click(function() {
     $( ".third" ).fadeTo( "fast" , 0.1, function() {});
     $( ".doub" ).fadeTo( "fast" , 1, function() {});
     $( ".button" ).fadeTo( "fast" , 1, function() {});

     var val = $(this).attr("val");
     $("#a").html("<span>This is a first sample " + val + "</span>");
     $("#b").html("<span>This is a second sample " + val + "</span>");
     $("#c").html("<span>This is a third sample " + val + "</span>");
});

基本上使用attr val并将其拉出来点击

希望简化我的jquery

2 个答案: