Question

好吧我还是很新但改进了我已经构建了这个脚本，当你点击不同的按钮时切换出多个div，但我打算扩展这个以使用20个不同的按钮来切换20个不同的div，所以它可以简化也不是一个庞大的剧本。

<div id="buttons">
    <div id="salt"></div>
    <div id="pepper"></div>
    <div id="mustard"></div>
</div>

<div id="content">
    <div class="salt-div"> SALT </div>
    <div class="pepper-div"> PEPPER </div>
    <div class="mustard-div"> MUSTARD </div>
</div>


<script>
    $(document).ready(function(){
      $('#salt-button').click(function() {
        $('.salt-div').show();
        $('.pepper-div').hide();
        $('.mustard-div').hide();
        $('#salt-button').css('background', '#F1F1F1');
        $('#pepper-button').css('background', 'none');
        $('#mustard-button').css('background', 'none');
      });

      $('#pepper-button').click(function() {
        $('.pepper-div').show();
        $('.salt-div').hide();
        $('.mustard-div').hide();
        $('#pepper-button').css('background', '#F1F1F1');
        $('#salt-button').css('background', 'none');
        $('#mustard-button').css('background', 'none');
      });

      $('#mustard-button').click(function() {
        $('.mustard-div').show();
        $('.salt-dev').hide();
        $('.pepper-div').hide();
        $('#mustard-button').css('background', '#F1F1F1');
        $('#salt-button').css('background', 'none');
        $('#pepper-button').css('background', 'none');
      });
    });

</script>

Answer 1

为所有块添加一个额外的公共类名，例如item-block，并且所有按钮都是公共类，例如item-button，然后当单击按钮时隐藏所有块并显示一个要求使用data属性将该信息添加到按钮;

<div id="buttons">
    <div class="item-button" data-block-id="salt-div" id="salt"></div>
    <div class="item-button" data-block-id="pepper-div" id="pepper"></div>
    <div class="item-button" data-block-id="mustard-div" id="mustard"></div>
</div>

<div id="content">
    <div id="salt-div" class="item-block"> SALT </div>
    <div id="pepper-div" class="item-block"> PEPPER </div>
    <div id="mustard-div" class="item-block"> MUSTARD </div>
</div>

$('.item-button').click(function () {
    var block_id = $(this).data('block-id');
    $('.item-block').hide();
    $('#'+block_id).show();
    $('.item-button').css('background', 'none');
    $(this).css('background', '#F1F1F1');
});

Answer 2

但是我计划扩展它以使用20个不同的按钮来切换20个不同的div，所以它也可以简化而不是一个庞大的脚本。

考虑到这个目标，我建议你在这里改变这个概念。我会创建一个div并根据单击的按钮修改它，而不是创建20个不同的div并管理所有div。

这样做的一种方法是创建一个对象来保存每个div的所有值，然后创建按钮并为每个按钮赋予一个数据属性（我实际上自己会使用一个选择框）。单击按钮时，使用属性值从存储对象中检索适当的内容。

这样的事情：

＆＃13;

var divs={
	'salt-div':{text:'salt-div', background:'#1c90f3'},
	'peper-div':{text:'peper-div', background:'#F1F1F1'},
	'mustard-div':{text:'mustard-div', background:'#e0aae6'},
};

$('.change-div').click(function(){
  var kind=$(this).data('kind');
 
	$('#my-div').text( divs[kind].text ).css('background-color', divs[kind].background );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div><br>
<button class="change-div" data-kind="salt-div">Change to salt-div</button>
<button class="change-div" data-kind="peper-div">Change to peper-div</button>
<button class="change-div" data-kind="mustard-div">Change to mustard-div</button>

＆＃13;

Answer 3

无需为按钮添加单独的div's。我们可以按原样使用这些按钮，而无需添加额外的classes。

将data-id属性添加到名称为content div的按钮中。为类名enter code here维护内容div的相同名称。

在按钮上单击我将获得data-id属性值。显示具有捕获值的div。

$('#content > div').hide();
$('#buttons button').click(function(e) {
    var clickedValue = $(this).attr('data-id');
		$('button').removeAttr('style');
		$('#content div').not('#'+clickedValue).hide();
		$(this).css('background','#f1f1f1');
		$('#'+clickedValue).show();
});

body{margin:10px;}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
    <button class="btn btn-default" type="submit" data-id="salt-div">salt</button>
    <button class="btn btn-default" type="submit" data-id="pepper-div">pepper</button>
    <button class="btn btn-default" type="submit" data-id="mustard-div">mustard</button>
</div>

<div id="content">
    <div id="salt-div"> SALT </div>
    <div id="pepper-div"> PEPPER </div>
    <div id="mustard-div"> MUSTARD </div>
</div>

Answer 4

如果你真的想点击你在问题中写的div，那么这有效：

<div id="buttons">
    <div id="salt">s</div>
    <div id="pepper">p</div>
    <div id="mustard">m</div>
</div>

<div id="content">
    <div id="salt-div"> SALT </div>
    <div id="pepper-div"> PEPPER </div>
    <div id="mustard-div"> MUSTARD </div>
</div>


<script>
    $(document).ready(function(){
      $('#buttons div').on("click", function(e) {
        var clickedid = $(this).attr('id');

        $('#content div').each(function() {
            if($( this ).attr('id') == clickedid + "-div") $(this).css('background', '#F1F1F1').show();
            else $(this).css('background', 'none').hide();
        });
      });
    });

</script>

Answer 5

简而言之，您需要将所有块统一到公共类名，然后在click事件上操作此类名。这样的事情将根据您的需要进行修改：

var allBlocks = $('.item-block');
$('.item-block').click(function () {
    $('.item-block').not(this).addClass('whatever');
});

.whatever {
    display: none;
}

这个多动作Jquery可以简化吗？

5 个答案: