时间戳

首页 > 解决方案 > 在 div 中创建了一个按钮

javascript - 在 div 中创建了一个按钮

问题描述

我创建了一个 div，在其中创建了一个按钮以在您单击它时显示一个链接，并且我已经复制了 div 三次，但是当我在复制的 div 中单击该按钮时，它仅显示在第一个 div 上（原始一）我使用 Tailwind Css 下面是 html 代码

 <div>
                        <div class="w-3/3 mx-2 sm:mx-0 md:mx-0 overflow-hidden shadow">
                            <img src="assets/img/python.jpg" alt="" class="object-cover">
                            <div class="mt-3 mx-2">
                                <h1 class="font-semibold text-xl">Lorem ipsum dolor sit amet…&lt;/h1>
                                <div class="mt-5 flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      (0)
                                    </div>
                                    <button class="bg-white focus:outline-none" onclick="editCourse()">
                                      <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                          </div>
                          <div class="ml-64 -mt-4 sm:ml-32" id="edit-course">
                              <button class="bg-red-500 rounded-full text-white px-2 ml-40 focus:outline-none" onclick="closeEdit()">
                                <i class="fas fa-times text-xs"></i>
                              </button>
                            <a href="add_courses.html" class="bg-white ml-12 flex items-center -mt-1 shadow w-32 border border-gray-300 px-3 py-2">
                                <i class="fas fa-pen mr-2"></i>
                                <span class="text-green-600">Edit course</span>
                              </a>
                          </div>
                       </div>

上面的 div 被复制到下面是 JavaScript 代码

//edit course
function editCourse(){
  var editBtn = document.getElementById('edit-course');
  editBtn.style.display = 'block';
}
// close edit course
function closeEdit(){
  var closeBtn = document.getElementById('edit-course');
  closeBtn.style.display = 'none';
}

这是单击任何省略号按钮时它在浏览器中的外观 在此处输入图像描述

标签： javascripthtmlcss

解决方案

如果我理解正确，您应该尝试在每门课程中使用 uniqe id。

 <div class="ml-64 -mt-4 sm:ml-32" id="edit-course-1">
      <button class="bg-red-500 rounded-full text-white px-2 ml-40 focus:outline-none" onclick="closeEdit('edit-course-1)">
           <i class="fas fa-times text-xs"></i>
       </button>
       <a href="add_courses.html" class="bg-white ml-12 flex items-center -mt-1 shadow w-32 border border-gray-300 px-3 py-2">
              <i class="fas fa-pen mr-2"></i>
              <span class="text-green-600">Edit course</span>
         </a>
  </div>

  <button class="bg-white focus:outline-none" onclick="editCourse('edit-course-1')">
           <i class="fas fa-ellipsis-v"></i>
   </button>

function editCourse(id){
  var editBtn = document.getElementById(id);
  editBtn.style.display = 'block';
}

function closeEdit(id){
  var closeBtn = document.getElementById(id);
  closeBtn.style.display = 'none';
}

推荐阅读