单击按钮jquery时交换div

Question

我如何使用jquery交换div，我想如果我点击botton它将显示lay-out-sw如果我点击en它应该交换

在我的HTML中

    <div class="layout-sw">
sw
    </div>
    <div class="layout-en">
en
    </div>
     <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-info  btn-language btn-sw">SW</button>
      <button type="button" class="btn btn-default  btn-language btn-en">EN</button>
    </div>

我使用这个jquery但是我遇到了一些错误

<script type="text/javascript">
    $(function() {
        $('.layout-en').hide();
        $('.btn-language').on('click',function(e){
            $('.btn-language').removeClass('btn-info').addClass('btn-default');
            $(this).removeClass('btn-default').addClass('btn-info');
            $('.layout-sw,.layout-en').hide();
            ($(this).text()=='SW') ? $('.layout-sw').show() : $('.layout-en').show(); 
        })

        $('.btn-on-off').on('click',function(e){
            $(this).closest('.btn-on-off-widget').find('.btn-value').val($(this).attr('value'));
            $(this).next('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
            $(this).prev('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
            if($(this).attr('value')==0){
                $(this).removeClass('btn-default').addClass('btn-gray');

            }else{
                $(this).removeClass('btn-default').addClass('btn-primary');
            }
        })

    });

</script>

Answer 1

您可以简单地使用jQuery的show()和hide()功能，如下所示。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.layout-en').hide();
  $('.btn-sw').click(function() {
    $('.layout-sw').show();
    $('.layout-en').hide();
  });
  $('.btn-en').click(function() {
    $('.layout-en').show();
    $('.layout-sw').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-sw">
  sw
</div>
<div class="layout-en">
  en
</div>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-info  btn-language btn-sw">SW</button>
  <button type="button" class="btn btn-default  btn-language btn-en">EN</button>
</div>

＆＃13;

＆＃13;

＆＃13;