Ву.Яш - добавить кнопку "удалить" при наведении курсора мыши и удалить его при нажатии на кнопку

Ву.Яш - добавить кнопку "удалить" при наведении курсора мыши и удалить его при нажатии на кнопку

12.01.2019 06:47:55 Просмотров 81 Источник

У меня есть следующие данные, поступающие с другого сервера, который не находится под моим контролем, и при отображении его в браузере я должен предоставить решение

1) показать кнопку удаления для класса childElementпри наведении курсора мыши

2) Нажмите на кнопку Удалить и удалите этот childElementdiv

Есть ли способ сделать это с помощью CSS/JS или Vuejs (динамическое добавление кнопки удаления при наведении и удаление элемента при нажатии кнопки)? Спасибо

.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press#comment95153259_54161193
так что же пошло не так с ответом GenericUser?
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press#comment95153339_54161193
Это решение, которое я ищу . В его ответе нет ничего плохого
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press#comment95153386_54161193
я поместил его скрипт внутри смонтированного крючка экземпляра Vue и удалил логику, которую я делал раньше

Ответы - Ву.Яш - добавить кнопку "удалить" при наведении курсора мыши и удалить его при нажатии на кнопку / Vue.js - Add delete button on hover and delete it on button press

Boussadjra Brahim

12.01.2019 07:00:03

Вы можете добавить массив в свой объект childDivschilddivs и какой элемент внутри этого массива содержит логическое showBtnintilially его значение falseи текст, который будет отображаться внутри элемента div

ОБНОВЛЕНИЕ :

вышеописанная логика может быть полезна, когда вы можете управлять данными в интерфейсе, но в соответствии с вариантом использования OP мы можем добавить скрипт, заданный @GenericUser внутри смонтированного крючка.

new Vue({
  el: '#app',
  data() {
    return {
      childDivs: [{
          text: 'First',
          showBtn: false
        },
        {
          text: 'Second',
          showBtn: false
        },
        {
          text: 'Third',
          showBtn: false
        }
      ]
    }
  },
  methods: {
    remove(i) {
      this.childDivs.splice(i, 1)

    }
  },

  mounted() {
    const childElements = document.querySelectorAll('.childElement');
    childElements.forEach(childElement => {
      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('hidden', '');
      deleteButton.innerText = "delete";
      deleteButton.classList.add("btn")
      deleteButton.classList.add("btn-danger")
      childElement.appendChild(deleteButton);
      childElement.addEventListener('mouseenter', event => {
        deleteButton.removeAttribute('hidden');
      });
      childElement.addEventListener('mouseleave', event => {
        deleteButton.setAttribute('hidden', '');
      });

      deleteButton.addEventListener('click', event => {
        childElement.setAttribute('hidden', '');
      });
    });
  }

})
.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />


<div id="app" data-app>

  <div id="videos">
    <div class="childElement">
      first div
    </div>
    <div class="childElement">
      second div
    </div>
    <div class="childElement">
      third div
    </div>
  </div>

</div>

https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95152931_54161287
Спасибо, но данные, которые я получаю от внешнего сервера, имеют структуру , о которой я упоминал, поэтому я не могу разделить их на дочерний объект данных и в цикле for.
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95152963_54161287
не могли бы вы показать, как вы это получаете? и как вы хотите удалить элементы?
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95153011_54161287
Это то, что я получаю от сервера и видео может иметь любое количество childElements <div id="videos"> <div class="childElement"> первый див </div> <div class="childElement"> второй див </div> <div class="childElement"> третий див </div> </div>
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95153022_54161287
Пожалуйста, ознакомьтесь с решением, предоставленным GenericUser, и вы поймете, о чем я говорю
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95153059_54161287
извини, я тебя неправильно понял
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161287#comment95153102_54161287
Нет, проблема, и спасибо за попытку помочь мне
THEWOLF

12.01.2019 07:01:13

Попробуйте этот код также используйте jquery для вашего проекта вот так здесь

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<div id="videos">
<div class="childElement" id="divOne" >
<div id="delete">X</div>
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

<script>  
$(document).ready(function(){
  $("#divOne").hover(function(){
    $(this).css("visibility", "visible");
    }, function(){
    $(this).css("visibility", "hidden");
  });

  $("#delelte").on("click",()=>{
      $("#divOne").children().remove();
   });
});
</script>
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161302#comment95152942_54161302
извините, я не использую JQUERY здесь . только CSS / JavaScript / VUEJS
20yco

12.01.2019 07:04:23

Вы можете попробовать это с помощью jQuery:

$('body').on('mouseenter', '.childElement', function(e){
  
    $(this).append('<div class="remove">remove it</div>');
  
    $('.childElement').on('mouseleave', function(){
      $('.remove').remove();
    });
  
    $('body').on('click', '.remove', function(e){
      $(this).parent().remove();
    });

});
.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}

.remove {
 position:absolute;
 width: 100px;
 height: 30px;
 background: #000;
 color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161333#comment95152953_54161333
извините, я не использую JQUERY здесь . только CSS / JavaScript / VUEJS
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161333#comment95153368_54161333
@Bujji пожалуйста, добавьте больше информации в следующий раз ( например, только родной js ), чтобы избежать подобных ситуаций, потому что jQuery-это библиотека JavaScript
https://stackoverflow.com/questions/54161193/vue-js-add-delete-button-on-hover-and-delete-it-on-button-press/54161333#comment95153528_54161333
Я прошу прощения. Спасибо и я позабочусь об этом
Является ответом!
GenericUser

12.01.2019 07:06:31

Ваша работа в основном сводится к некоторому скрипту, который найдет все элементы и автоматически добавит элементы со слушателями.

const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
  // create button for each childElement
  const deleteButton = document.createElement('button');
  deleteButton.setAttribute('hidden', '');
  deleteButton.innerText = "Click to delete";
  // append button to the childElement
  childElement.appendChild(deleteButton);

  // add event listeners
  childElement.addEventListener('mouseenter', event => {
    deleteButton.removeAttribute('hidden');
  });

  childElement.addEventListener('mouseleave', event => {
    deleteButton.setAttribute('hidden', '');
  });

  deleteButton.addEventListener('click', event => {
    childElement.setAttribute('hidden', '');
  });
});
.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}
<div id="videos">
  <div class="childElement">
    first div
  </div>
  <div class="childElement">
    second div
  </div>
  <div class="childElement">
    third div
  </div>
</div>

Закрыть X