触发另一个时改变1级触发器。 （1次动作，2次触发）

Question

我想要实现的是当我触发数字2（输入）时切换TRIGGER1的颜色类。 要查看我的问题，请先单击TRIGGER1然后单击TRIGGER2。该框已关闭，但第一个触发器的类不会更改

HTML

<button id="trigger1" class="color-front" >TRIGGER1</button>
<input id="trigger2" type="text" placeholder="TRIGGER2">
<div id="boxToOpenOnTrigger" class="color-back elem-hide"></div>

CSS

.elem-hide{ display: none; }
.color-back{ background-color: #3d3d2d; }
.color-front{ background-color: white; }
#boxToOpenOnTrigger{ width: 300px; height: 300px; }

的jQuery

$('#trigger1').on('click', function(){
    $( this ).removeClass('color-front');
    $( this ).toggleClass('color-back');
    $( "#boxToOpenOnTrigger" ).toggleClass('elem-hide');
});

$('#trigger2').on('click', function(){
    if ( $("#trigger1").hasClass( "color-back" ) ) {
        $( this ).removeClass( "color-back" );
        $( this ).addClass( "color-front" );
    } 
    $( "#boxToOpenOnTrigger" ).addClass('elem-hide');
});

我希望你理解我，我的英语还不是很好：/

https://jsfiddle.net/gtagc01g/

Answer 1

JS

   $('#trigger1').on('click', function(){
        $( this ).removeClass('color-front');
        $( this ).toggleClass('color-back');
        $( "#boxToOpenOnTrigger" ).toggleClass('elem-hide');
    });

    $('#trigger2').on('click', function(){

        var trigger1=$("#trigger1");
        if (trigger1.hasClass( "color-back" ) ) {
            trigger1.removeClass( "color-back" );
            trigger1.addClass( "color-front" );
        } 
        $( "#boxToOpenOnTrigger" ).addClass('elem-hide');
    });

  

请注意，您在onclick事件this中使用了trigger2，该事件引用了trigger2

DEMO

Answer 2

我不知道我是否理解你的问题，但我会尽力回答。

当您点击trigger2时，您想要将类“color-font”添加到触发器1？

如果是这样的话，那就这样做：

 $('#trigger2').on('click', function(){
    if ( $("#trigger1").hasClass( "color-back" ) ) {
        $( this ).removeClass( "color-back" );
        $("#trigger1").addClass( "color-front" );
    } 
    $( "#boxToOpenOnTrigger" ).addClass('elem-hide');
});