Как добавить класс addClass и addRemove или изменить свойство с помощью .css?

Я пробовал много способов, но все еще не работает...

  • нажмите кнопку «Отправить» и кнопку «Развернуть» (вкладку), чтобы отобразить чат-бот и скрыть вкладку.
  • нажмите кнопку сворачивания (чат-бот), чтобы скрыть чат-бота и отобразить вкладку

1) добавитькласс/удалитькласс

default.htm

<!-- ------- button ------- -->
<div class="ask-button-container">
    <button id="submit" class="btnSubmit">Ask</button>
</div>

<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
    </div>
</div>

<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
    <div id="control-bar">
        <div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

JS

$(function(){

    $(".tab-close").click(function() {        
        $(this).closest(".my-tab").addClass("hidden");   //working
    }); 

    $(".tab-expand").click(function() {        
    var chatbot = $(this).closest(".cb-window");
    chatbot.removeClass("hidden");
    $(this).closest(".my-tab").addClass("hidden");    //working
    });

    $(".btnSubmit").click(function() {   
    var chatbot = $(this).closest(".cb-window");
        chatbot.removeClass("hidden");
        $(this).closest(".my-tab").addClass("hidden");
    });

    $(".minus").click(function() {
    var chatbot = $(this).closest(".cb-window");
        chatbot.addClass("hidden");
        $(this).closest(".my-tab").removeClass("hidden");
    });
});

2) .css

$(this).closest(".cb-window").css("visibility", "visible");

Может кто-нибудь показать мне, как это сделать? Спасибо. или любые другие способы использования jquery? .show/.hide , .toggle?


javascript html jquery css octobercms
person BEX    schedule 11.07.2016    source источник
comment
не могли бы вы уточнить свой вопрос. там очень много кодов.   -  person Gauthaman Sahadevan    schedule 11.07.2016
comment
где элемент с классом my-tab??   -  person Mohamed-Yousef    schedule 11.07.2016

Ответы (3)


arrow_upward
0
arrow_downward

Проблема заключалась в вашем способе достижения правильного element и вашем понимании closest. вариант jquery.

Согласно определению — closest() возвращает первого предка выбранного элемента. Предок – это родитель, дедушка и бабушка, прадедушка и т. д..

Когда вы говорите closest в событии клика btnSubmit, .cb-window никогда не было его предком, поэтому $(this).closest('.cb-window') в основном не работает. Вам нужно вернуться к родителю btnSubmit, который будет sibling из .cb-window, и тогда вы сможете легко получить этот элемент. Ниже описано, как вы можете этого достичь. Кроме того, вам не нужно несколько $(function(){, которые эквивалентны $(document).ready, и достаточно только одного.

$(function() {
  $(".btnSubmit").click(function() {
    $(this).closest(".ask-button-container").siblings('.cb-window').removeClass("hidden");
    //closest ancestor would be .ask-button-container and its sibling is .cb-window
    $(this).closest(".my-tab").addClass("hidden");
    //did not find .my-tab element in your `html`
  });

  $(".minus").click(function() {
    $(this).closest('.cb-window').addClass("hidden");
    $(this).closest(".my-tab").removeClass("hidden");
  });
});
.hidden {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="ask-button-container">
  <button id="submit" class="btnSubmit">Ask</button>
</div>

<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
  <div id="control-bar">
    <div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign"></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

person Guruprasad J Rao    schedule 11.07.2016

arrow_upward
0
arrow_downward

Когда мы нажимаем или выполняем операцию над элементом, мы можем добавить или удалить класс, и вы можете попробовать вот так.

$('#elm').hover(
   function(){ $(this).addClass('hover') },
   function(){ $(this).removeClass('hover') }
)
person Sangeetha    schedule 11.07.2016

arrow_upward
0
arrow_downward

проблема в том, что вы не нацеливаете нужный элемент правильным образом. вам нужно использовать

$(function(){

    $(".tab-close").click(function() {        
        $(this).closest(".my-tab").addClass("hidden");   //working
    }); 

    $(".tab-expand").click(function() {        
    var chatbot = $(this).closest('.my-tab').next(".cb-window");
    chatbot.removeClass("hidden");
    $(this).closest(".my-tab").addClass("hidden");    //working
    });

    $(".btnSubmit").click(function() {   
    var chatbot = $(this).closest('div').next().next(".cb-window");
        chatbot.removeClass("hidden");
        $(this).closest('div').next(".my-tab").addClass("hidden");
    });

    $(".minus").click(function() {
    var chatbot = $(this).closest(".cb-window");
        chatbot.addClass("hidden");
        chatbot.prev(".my-tab").removeClass("hidden");
    });
});
.hidden{
  display : none;
}
.minus{
  padding : 5px;
  background : red;
  color: #fff;
  text-align : center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ------- button ------- -->
<div class="ask-button-container">
    <button id="submit" class="btnSubmit">Ask</button>
</div>

<!-- ------- tab ------- -->
<div id="tab{{__SELF__.id}}" name="{{__SELF__.id}}" class="my-tab">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn"></div>
    </div>
</div>

<!-- ------- chatbot ------- -->
<div id="chatbot-window-wrapper{{__SELF__.id}}" class="cb-window hidden" style="position: fixed;">
    <div id="control-bar">
        <div id="chatbot-minimize{{__SELF__.id}}" class="minus pull-right chatbot-btn"><span class="glyphicon glyphicon-minus-sign">-</span></div>
    </div>
    <iframe id="chatbot-window" name="chatbot-window" scroll="" width="100%" height="100%" frameborder="2" src="{{ 'page1'|page }}"></iframe>
</div>

person Mohamed-Yousef    schedule 11.07.2016
comment
да, я пробовал, но не работает... и {{SELF.id}} важен в моем коде - person BEX; 11.07.2016