javascript – 填充导致错误按钮被触发？

2023年1月26日 207次阅读

所以我试图将按钮放在img元素上.我已经能够使用一些CSS,但为了让它们垂直放置,我使用了填充.这似乎导致正确的按钮触发问题.似乎唯一的图标就是moveDown图标.这似乎是由于使用了填充.

有任何想法吗？

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)

    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
    })
  }
  moveItUp();
  moveItDown();
  
    .track img {
      position: relative;
      float: left;
      height: 75px;
      border-radius: 0px;
      
    }
    .soundMove{
      position: relative;
      text-align: center;
      font-size: 2.5em; 
       
    }
     
    .moveUp{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: -10;
      z-index: 10;
      padding-left: 15px;
      color: white !important;
    }
    .moveDown{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      padding-top: 35px;
      padding-left: 15px;
      z-index: 10;
       color: white !important;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
          <div class='track' id='test'>
            <div class="soundMove">
            <i class="moveUp fa fa-arrow-up"></i>
            <i class="moveDown fa fa-arrow-down"></i> 
             </div>
            <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
          </div>
    </div>

HTML

<div id="queueList" class="queueListDiv col-md-4">
      <div class='track' id='test'>
        <div class="soundMove">
        <i class="moveUp fa fa-arrow-up"></i>
        <i class="moveDown fa fa-arrow-down"></i> 
         </div>
        <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
      </div>
</div>

CSS

.track img {
  position: relative;
  float: left;
  height: 75px;
  border-radius: 0px;

}
.soundMove{
  position: relative;
  text-align: center;
  font-size: 2.5em; 

}

.moveUp{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: -10;
  z-index: 10;
  padding-left: 15px;
  color: white !important;
}
.moveDown{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 35px;
  padding-left: 15px;
  z-index: 10;
   color: white !important;
}

JS

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)
      console.log(queueList)
      arrayMoveUp(queueList, moveUpId)
      console.log(queueList)
    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
      console.log(queueList);
      arrayMoveDown(queueList, moveDownId)
      console.log(queueList);
    })
  }

这是小提琴https://jsfiddle.net/m6wm8jcf/

最佳答案 好的,我想你可以做到这一点.

function arrayMoveDown(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex + 1, 0, element)
}

function arrayMoveUp(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex - 1, 0, element)
}
function moveItUp() {
  $(".moveUp").off("click").on("click", function() {
    var moveUpId = $(this).closest("div").attr("id");
    console.log("moveupClicked")
    console.log(moveUpId)
  });
}
function moveItDown() {
  $(".moveDown").off("click").on("click", function() {
    var moveDownId = $(this).closest("div").attr("id");
    console.log("moveDownClicked")
  });
}

moveItUp();
moveItDown();
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
.track {position: relative;}
.track img {
  height: 75px;
  border-radius: 0px;
}
.soundMove{
  font-size: 2em;
}

.moveUp{
  cursor: pointer;
  position: absolute;
  top: 5px;
  z-index: 10;
  left: 15px;
  color: white !important;
}
.moveDown {
  cursor: pointer;
  position: absolute;
  left: 0;
  bottom: 5px;
  left: 15px;
  z-index: 10;
  color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
  <div class='track' id='test'>
    <div class="soundMove">
      <i class="moveUp fa fa-arrow-up"></i>
      <i class="moveDown fa fa-arrow-down"></i> 
    </div>
    <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
  </div>
</div>
点赞