Jquery: Как скрыть элемент, пока он находится в другом элементе? - PullRequest
Новая
       3

Jquery: Как скрыть элемент, пока он находится в другом элементе?

0 голосов
/ 16 октября 2019

как скрыть "куб-2", нажав на "click-me", который включен в "куб-2"? Я сделал событие, но он удалил весь мой куб-2, я хочу скрыть куб-2 один за другим. Кто-нибудь может решить это? пожалуйста, помогите мне. 

$('.cube-1').click(function name(params) {
    $('.cube-1').append('<div class="cube-2"><div class="click-me">click me to hide this cube</div></div>');
    // how to add event click on "click-me" to hide "cube-2"??
})
.cube-1 {
    width: 100px;
    height: 100px;
    float: left;
    background: blue;
}
.cube-2 {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    float: left;
    background: red;
}

.click-me {
    width: 100%;
    height: 50px;
    background: white;
}
<html>
  <head>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  </head>
  <div class="cube-1"></div>
</html>

Ответы [ 4 ]

0 голосов
/ 16 октября 2019

Попробуйте это 

$(document.body).on('click', '.cube-2', function (event) {
    $(this).hide();
});


$('.cube-1').click(function(event) {




 if(event.target.className =='cube-1')

    $('.cube-1').append('<div class="cube-2"><div class="click-me">click me to hide this cube</div></div>');
    // how to add event click on "click-me" to hide "cube-2"??
})
.cube-1 {
    width: 100px;
    height: 100px;
    float: left;
    background: blue;
}
.cube-2 {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    float: left;
    background: red;
}

.click-me {
    width: 100%;
    height: 50px;
    background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cube-1"></div>
0 голосов
/ 16 октября 2019

При добавлении куба-2 вам просто нужно связать свой щелчок мышью по div.

Добавьте свой скрипт, как показано ниже -

$ ('. Cube-1'). On ('click', function (event) {$ ('. cube-1'). append ('click me, чтобы скрыть этот куб');}) function myFunction (param) {event.stopPropagation ();$ (Пары) .remove ();}

0 голосов
/ 16 октября 2019

Вы можете добавить идентификатор к своему кубу-2 div и соответствующему ему тегу привязки click-me и удалить только div с этим идентификатором.

Вы также можете проверить Строка шаблона 

$('.cube-1').click(function name(e) {
    var cubeCounter = 1;
    if (e.target.className == "cube-1") {
        $('.cube-1').append(`<div class=cube-2 id=cube-${cubeCounter}><div class=click-me id=${cubeCounter}>click me to hide this cube</div></div>`);
        cubeCounter++;
    }
})

$(document).on('click', '.click-me', function name(e) {
    var cubeId = e.target.id;
    $(`#cube-${cubeId}`).remove();
})
0 голосов
/ 16 октября 2019

вам нужно обработать событие щелчка dyanamic второго куба и предотвратить событие щелчка родительского элемента управления при щелчке дочернего куба 

$('.cube-1').click(function name(e) {

    if(e.target.className == "cube-1")
    {
      $('.cube-1').append('<div class="cube-2"><div class="click-me">click me to 
      hide this cube</div></div>');
    }

});

 $(document).on('click','.cube-2',function name(e) 
 {
      $(this).remove();
      // how to add event click on "click-me" to hide "cube-2"??
 })

Проверьте рабочую демонстрацию [Ссылка]

https://jsfiddle.net/2L3k5hcb/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...