如何優(yōu)化jQuery點(diǎn)擊事件以及js代碼

1. 重復(fù)使用的對象統(tǒng)一獲取
2. 避免直接操作樣式，改為操作class

$('#room-ctrl-phone-ctrl-open-btn').click(function() {

$('#room-ctrl-phone-container-hotel-ser,#room-ctrl-phone-container-room-ctrl,#room-ctrl-phone-container-light-ctrl').css('display', 'none');
$('#room-ctrl-hotel-ser').removeClass('opacity100').addClass('opacity0');
$('#room-ctrl-original-img,#room-ctrl-init-btn').removeClass('opacity0');
$('#room-ctrl-original-img,#room-ctrl-init-bt').addClass('opacity100');

});

你可以從CSS選擇器的書寫的角度，改善代碼的書寫,將ID選擇器修改為類選擇器，通過父元素的class的變化，來控制子元素的樣式
例如
CSS:

.room-ctrl-phone-container{

}
.room-ctrl-phone-container .room-ctrl-hotel-ser{
    opacity:100;
}
.room-ctrl-phone-container .room-ctrl-original-img{
    opacity:0;
}

.room-ctrl-phone-container .room-ctrl-init-btn{
    opacity:0;
}

.room-ctrl-phone-container.hidden .room-ctrl-phone-container-hotel-ser,
.room-ctrl-phone-container.hidden .room-ctrl-phone-container-room-ctrl,
.room-ctrl-phone-container.hidden .room-ctrl-phone-container-light-ctrl
{
    display:none;
}

.room-ctrl-phone-container.hidden .room-ctrl-original-img{
    opacity:100;
}

.room-ctrl-phone-container.hidden .room-ctrl-init-btn{
    opacity:100;
}

JS:

$('#room-ctrl-phone-ctrl-open-btn').click(function() {
    
    //$('#room-ctrl-phone-container-hotel-ser').css('display', 'none');
    //$('#room-ctrl-phone-container-room-ctrl').css("display", "none");
    //$('#room-ctrl-phone-container-light-ctrl').css("display", "none");
    //$('#room-ctrl-hotel-ser').removeClass('opacity100');
    //$('#room-ctrl-hotel-ser').addClass('opacity0');
    //$('#room-ctrl-original-img').removeClass('opacity0');
    //$('#room-ctrl-original-img').addClass('opacity100');
    //$('#room-ctrl-init-btn').removeClass('opacity0');
    //$('#room-ctrl-init-btn').addClass('opacity100');
 
    
    $('.room-ctrl-phone-container').toggleClass("hidden")
});

寫成鏈?zhǔn)降牟缓脝?/p>

寫成鏈?zhǔn)降?，嘗試用正則去匹配選擇器

猜測你這個(gè)可能是個(gè)表單輸入中的某段js，點(diǎn)擊按鈕顯示什么什么，隱藏什么什么功能。如果是這樣的話可以稍微動(dòng)態(tài)化下，你上面注釋是remove three phone container，后期如果加多個(gè)輸入框或者少個(gè)輸入框什么的，是不是還得改js?？纯慈缦麓a：

<input type="button" data-show-box="phone-show-box" data-hide-box="phone-hide-box" id="room-ctrl-phone-ctrl-open-btn">

<input type="text" name="aa" class="phone-show-box">
<input type="text" name="bb" class="phone-show-box">

<input type="text" name="cc" class="phone-hide-box">
<input type="text" name="dd" class="phone-hide-box">

<script>
$("#room-ctrl-phone-ctrl-open-btn").click(function(){
    var show_box = $(this).data('show-box'),
        hide_box = $(this).data('hide-box');
        
    $("." + show_box).show();
    $("." + hide_box).hide();
});
</script>

看注釋是點(diǎn)擊時(shí)一部分隱藏，一部分更換css效果
方法一使用query中的群選擇器及連寫屬性
// click switch button in the middle event
// remove three phone container,dining car.init btn and original img appear
$('#room-ctrl-phone-ctrl-open-btn').click(function() {

$('#room-ctrl-phone-container-hotel-ser，#room-ctrl-phone-container-light-ctrl，#room-ctrl-phone-container-room-ctrl').css('display', 'none');
$('#room-ctrl-hotel-ser，#room-ctrl-original-img，#room-ctrl-init-btn').removeClass('opacity100').addClass('opacity0');

});

方法二 書寫一個(gè)標(biāo)識(shí)class在相同屬性的調(diào)用
$('#room-ctrl-phone-ctrl-open-btn').click(function() {

$('.room-ctil-hidden').css('display', 'none');
$('.room-ctil-op').removeClass('opacity100').addClass('opacity0');

});

$('#room-ctrl-phone-ctrl-open-btn').click(function() {
    $('[id^="room-ctrl-phone-container-"]').hide();
    $('#room-ctrl-hotel-ser').removeClass('opacity100').addClass('opacity0');
    $('#room-ctrl-original-img,#room-ctrl-init-btn').removeClass('opacity0').addClass('opacity100');
});

$('#room-ctrl-phone-ctrl-open-btn').click(function() {
  var selector_hide = ['#room-ctrl-phone-container-hotel-ser','#room-ctrl-phone-container-room-ctrl','#room-ctrl-phone-container-light-ctrl'],
    selector_0to1 = ['#room-ctrl-original-img','#room-ctrl-init-btn'],
    selector_1to0 = ['#room-ctrl-hotel-ser'],
    cls_op1 = 'opacity100',
    cls_op0 = 'opacity0';
  $(hide_selector.join(',')).hide();
  $(selector_1to0.join(',')).removeClass(cls_op1).addClass(cls_op0);
  $(selector_0to1.join(',')).removeClass(cls_op0).addClass(cls_op1);
});