如何优化jQuery点击事件以及js代码

Question

// 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').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');
});

各位，如上面代码所示，因为感觉重复性的操作比较多，所以想将上面的代码封装或者优化以便提高代码执行效率，但是没有什么思路，希望大佬们不吝赐教，指导一下，谢谢啦

Answer 1

你可以从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")
});

Answer 2

$('#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');

});

Answer 3

$('#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);
});

Answer 4

1. 重复使用的对象统一获取
2. 避免直接操作样式，改为操作class

Answer 5

猜测你这个可能是个表单输入中的某段js，点击按钮显示什么什么，隐藏什么什么功能。如果是这样的话可以稍微动态化下，你上面注释是remove three phone container，后期如果加多个输入框或者少个输入框什么的，是不是还得改js。看看如下代码：

<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>

Answer 6

写成链式的，尝试用正则去匹配选择器

Answer 7

$('#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');
});

Answer 8

看注释是点击时一部分隐藏，一部分更换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');

});

方法二 书写一个标识class在相同属性的调用
$('#room-ctrl-phone-ctrl-open-btn').click(function() {

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

});

Answer 9

写成链式的不好吗