Question

我正在创建一些拼图，它上面有4个按钮我点击它们中的任何一个它的目标框应该替换由框号给出的那个框，例如：如果我点击按钮4，然后目标应该更换盒子并占据位置

$(document).ready(function() {

  $('.btn').off('click').on('click', function() {

    $(".target1").attr('class', 'target');


  });

});

.main_box {
  width: 600px;
  height: 500px;
  position: relative;
  margin: 25px 16px 16px 134px;
  border: 1px solid #000;
}

.big_box {
  width: 488px;
  height: 350px;
  position: absolute;
  background-color: rgba(162, 255, 224, 0.67);
  margin: 8px 11px 13px 58px;
  border: 1px solid #c51ae2;
  border-radius: 53px;
}

.target {
  width: 80px;
  height: 80px;
  background: green;
  border: 1px solid #000;
  position: absolute;
  left: 205px;
  top: 127px;
  border-radius: 15px;
  text-align: center;
}

.target1 {
  width: 80px;
  height: 80px;
  background: #ea5cd8;
  border: 1px solid #000;
  position: absolute;
  left: 16px;
  top: 16px;
  border-radius: 15px;
  text-align: center;
}

.target2 {
  width: 80px;
  height: 80px;
  background: #59a8e6;
  border: 1px solid #000;
  position: absolute;
  left: 388px;
  top: 15px;
  border-radius: 15px;
  text-align: center;
}

.target3 {
  width: 80px;
  height: 80px;
  background: #FFC107;
  border: 1px solid #000;
  position: absolute;
  left: 20px;
  top: 240px;
  border-radius: 15px;
  text-align: center;
}

.target4 {
  width: 80px;
  height: 80px;
  background: #607D8B;
  border: 1px solid #000;
  position: absolute;
  left: 393px;
  top: 238px;
  border-radius: 15px;
  text-align: center;
}

.btn {
  width: 75px;
  height: 75px;
  position: absolute;
  margin: 402px 34px;
  text-align: center;
  border: 1px solid;
  cursor: pointer;
  border-radius: 15px;
}

#hello_1 {
  left: 67px;
}

#hello_2 {
  left: 173px;
}

#hello_3 {
  left: 290px;
}

#hello_4 {
  left: 410px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_box">
  <div class="big_box">
    <div class="target">Tar</div>
    <div class="target1">1</div>
    <div class="target2">2</div>
    <div class="target3">4</div>
    <div class="target4">3</div>
  </div>
  <div class="btn" id="hello_1">btn 1</div>
  <div class="btn" id="hello_2">btn 2</div>
  <div class="btn" id="hello_3">btn 3</div>
  <div class="btn" id="hello_4">btn 4</div>
</div>

Answer 1

＆＃13;

class Player
  has_many :kills, class_name: Interaction, foreign_key: :player_id inverse_of: :killer
  has_many :deaths, class_name: Interaction, foreign_key: :victim_id, inverse_of: :victim 
end

class Interaction
  belongs_to :killer, class_name: Player, foreign_key: :player_id, inverse_of: :kills
  belongs_to :victim, class_name: Player, foreign_key: :victim_id, inverse_of :deaths
end

＆＃13;

$(document).ready(function() {

  $('#hello_1').off('click').on('click', function() {

    /*$(".target1").attr('class', 'target').css({background:'#ea5cd8'});*/
    $(".target").css({top: 16, left: 16, zIndex:999});
   
  });
    $('#hello_2').off('click').on('click', function() {
 /*   $(".target2").attr('class', 'target').css({background:'#59a8e6'});*/
 $(".target").css({top: 15, left: 388, zIndex:999});

  });
  $('#hello_3').off('click').on('click', function() {
  /*  $(".target3").attr('class', 'target').css({background:'#FFC107'});*/
  $(".target").css({top: 240, left: 20, zIndex:999});

  });

  $('#hello_4').off('click').on('click', function() {
   /* $(".target4").attr('class', 'target').css({background:'#607D8B'});*/
    $(".target").css({top: 238, left: 393, zIndex:999});

  });

});

＆＃13;

.main_box {
    width: 600px;
    height: 500px;
    position: relative;
    margin: 25px 16px 16px 134px;
    border: 1px solid #000;
}
.big_box {
    width: 488px;
    height: 350px;
    position: absolute;
    background-color: rgba(162, 255, 224, 0.67);
    margin: 8px 11px 13px 58px;
    border: 1px solid #c51ae2;
    border-radius: 53px;
}

.target {
    width: 80px;
    height: 80px;
    background: green;
    border: 1px solid #000;
    position: absolute;
    left: 205px;
    top: 127px;
    border-radius: 15px;
    text-align: center;
}
.target1 {
    width: 80px;
    height: 80px;
    background: #ea5cd8;
    border: 1px solid #000;
    position: absolute;
    left: 16px;
    top: 16px;
    border-radius: 15px;
    text-align: center;
}
.target2 {
    width: 80px;
    height: 80px;
    background: #59a8e6;
    border: 1px solid #000;
    position: absolute;
    left: 388px;
    top: 15px;
    border-radius: 15px;
    text-align: center;
}
.target3 {
    width: 80px;
    height: 80px;
    background: #FFC107;
    border: 1px solid #000;
    position: absolute;
	left: 20px;
    top: 240px;
    border-radius: 15px;
    text-align: center;
}
.target4 {
    width: 80px;
    height: 80px;
    background: #607D8B;
    border: 1px solid #000;
    position: absolute;
    left: 393px;
    top: 238px;
    border-radius: 15px;
    text-align: center;
}
.btn {
    width: 75px;
    height: 75px;
    position: absolute;
    margin: 402px 34px;
    text-align: center;
    border: 1px solid;
    cursor: pointer;
    border-radius: 15px;
}
#hello_1 {
    left: 67px;
}
#hello_2 {
    left: 173px;
}
#hello_3 {
    left: 290px;
}
#hello_4 {
    left: 410px;
}

＆＃13;

所以，这就是我想要它完成的事情，我希望你们都明白感谢你的帮助这是https://jsfiddle.net/o2gxgz9r/17554/

点击按钮，内容和颜色属性必须交换位置

1 个答案: