在每个链接上显示/隐藏div点击 - 如何优化代码？

时间：2016-08-04 13:21:23

标签： jquery optimization

我创建了在单击文本时显示/隐藏多个<div>元素的代码。当您点击顶部的文字时，它会在下方显示关联的<div>并隐藏其他文字。

如何使用更少的代码行优化它？

＆＃13;
＆＃13; 
//-- flag section
$('.contact-div #uk').click(function() {
  $('.contact-div .china').hide();
  $('.contact-div .uk').show();
  $('.contact-div .india').hide();
  $('.contact-div .malta').hide();

  //-- flag images
  $('#uk').addClass('scaleimg');
  $('#china').removeClass('scaleimg');
  $('#india').removeClass('scaleimg');
  $('#malta').removeClass('scaleimg');
});

$('.contact-div #china').click(function() {
  $('.contact-div .china').show();
  $('.contact-div .uk').hide();
  $('.contact-div .india').hide();
  $('.contact-div .malta').hide();

  //-- flag images
  $('#uk').removeClass('scaleimg');
  $('#china').addClass('scaleimg');
  $('#india').removeClass('scaleimg');
  $('#malta').removeClass('scaleimg');
});

$('.contact-div #india').click(function() {
  $('.contact-div .china').hide();
  $('.contact-div .uk').hide();
  $('.contact-div .india').show();
  $('.contact-div .malta').hide();

  //-- flag images
  $('#uk').removeClass('scaleimg');
  $('#china').removeClass('scaleimg');
  $('#india').addClass('scaleimg');
  $('#malta').removeClass('scaleimg');
});

$('.contact-div #malta').click(function() {
  $('.contact-div .china').hide();
  $('.contact-div .uk').hide();
  $('.contact-div .india').hide();
  $('.contact-div .malta').show();

  //-- flag images
  $('#uk').removeClass('scaleimg');
  $('#china').removeClass('scaleimg');
  $('#india').removeClass('scaleimg');
  $('#malta').addClass('scaleimg');

});
＆＃13; 
.contact-div {
  float: left;
  margin: 16px 0 0;
  padding: 0;
}
.contact-div .flag {
  margin: 0 0 10px;
}
.contact-div .flag span {
  margin-left: 5px;
}
.cont-address {
  margin-left: 23px;
}
.cont-address ul li {
  line-height: 24px;
  color: #000000;
  margin-bottom: 15px;
}
.cont-address ul li i:before {
  margin: 15px 0 0 -20px;
  font-size: 20px;
}
.china,
.india,
.malta {
  display: none;
}
.scaleimg img {
  -webkit-transform: scale(1.19);
  -moz-transform: scale(1.19);
  -o-transform: scale(1.19);
  transform: scale(1.19);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-div">
  <div class="flag">
    <span id="uk" class="scaleimg">UK</span>
    <span id="china">China</span>
    <span id="india">India</span>
    <span id="malta">Malta</span>
  </div>
  <div class="cont-address">
    <ul class="uk">
      <li><i class="fa fa-map-marker"></i> UK,
        <br>Address of UK
      </li>
    </ul>
    <ul class="china">
      <li><i class="fa fa-map-marker"></i> China,
        <br>Address of China
      </li>
    </ul>
    <ul class="india">
      <li><i class="fa fa-map-marker"></i> India
        <br>Address of India</li>
    </ul>
    <ul class="malta">
      <li><i class="fa fa-map-marker"></i> Malta,
        <br>Address of Malta</li>
    </ul>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

查看JSFiddle

4 个答案:

答案 0 :(得分：1)

尝试this(fiddle 

$('.flag span').click(function(){
    $('.cont-address ul').hide();
    $('.'+$(this).attr('id')).show();
})

答案 1 :(得分：1)

我的建议基于：

＆＃13;
＆＃13; 
$(function () {
  $('.contact-div .flag span').click(function() {
    $('.contact-div ul:not(.' + this.id + ')').hide();
    $('.contact-div ul.' + this.id).show();

    $('div.flag span').toggleClass('scaleimg')
  });
});
＆＃13; 
.contact-div{float: left; margin:16px 0 0; padding: 0;}
.contact-div .flag{margin: 0 0 10px;}
.contact-div .flag span{margin-left: 5px;}
.cont-address{margin-left: 23px;}
.cont-address ul li{line-height: 24px; color: #000000; margin-bottom: 15px;}
.cont-address ul li i:before{margin:15px 0 0 -20px; font-size: 20px;}

.china, .india, .malta{display:none;}
.scaleimg img{
  -webkit-transform: scale(1.19);
  -moz-transform: scale(1.19);
  -o-transform: scale(1.19);
  transform: scale(1.19);
}
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="contact-div">
    <div class="flag">
        <span id="uk" class="scaleimg">UK</span>
        <span id="china">China</span>
        <span id="india">India</span>
        <span id="malta">Malta</span>
    </div>
    <div class="cont-address">
        <ul class="uk">
            <li><i class="fa fa-map-marker"></i> UK, <br>
                Address of UK
            </li>
        </ul>
        <ul class="china">
            <li><i class="fa fa-map-marker"></i> China, <br>
                Address of China
            </li>
        </ul>
        <ul class="india">
            <li><i class="fa fa-map-marker"></i> India <br>
                Address of India</li>
        </ul>
        <ul class="malta">
            <li><i class="fa fa-map-marker"></i> Malta, <br>
                Address of Malta</li>
        </ul>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你可以这样做：

https://jsfiddle.net/x45gqmmu/15/ 

$('.contact-div .flag > span').click(function() {
  var id = $(this).attr("id");

  $('.contact-div .cont-address > ul').hide();
  $('.contact-div .' + id).show();

  $(".scaleimg").removeClass("scaleimg");
  $('#' + id).addClass('scaleimg');

});

答案 3 :(得分：0)

您可以使用单个JavaScript事件侦听器实现此目的，并对HTML中的属性进行一些更改（但也可以在不执行此操作的情况下完成）以及编辑CSS规则之一，如下所示：

var current=document.querySelector(".cont-address>.show"),
    flags=document.querySelector(".flag"),
    country;
flags.addEventListener("click",function(evt){
    var target=event.target;
    if(country=target.dataset.country)
        if(country=document.getElementById(country)){
            current.classList.remove("show");
            country.classList.add("show");
            current=country;
        }
},0);
.contact-div{
    float:left;
    margin:16px 0 0;
    padding:0;
}
.contact-div>.flag{
    margin:0 0 10px;
}
.contact-div>.flag>span {
    margin-left:5px;
}
.cont-address{
    margin-left:23px;
}
.cont-address>ul:not(.show){/* changed selector from ".china,.india,.malta" */
    display:none;
}
.cont-address>ul>li{
    line-height:24px;
    color: #000000;
    margin-bottom: 15px;
}
<div class="contact-div">
    <div class="flag">
        <span data-country="uk">UK</span>
        <span data-country="china">China</span>
        <span data-country="india">India</span>
        <span data-country="malta">Malta</span>
    </div>
    <div class="cont-address">
        <ul class="show" id="uk"><li>UK,<br>Address of UK</li></ul>
        <ul id="china"><li>China,<br>Address of China</li></ul>
        <ul id="india"><li>India,<br>Address of India</li></ul>
        <ul id="malta"><li>Malta,<br>Address of Malta</li></ul>
    </div>
</div>

相关问题
最新问题