如何使用jQuery将4个元素中的一个添加到另一个div中？

Question

如何使用jQuery将4个元素中的一个添加到另一个div中？

3

你好，我是一名学习jQuery的学生，我的目标是将点击的元素（仅限单个字符）移动到指定的“#chosen” div区域，其余元素保持不变（因为在此步骤后我将添加第二个选择选项）。然而，当点击其中一个字符时，所有字符都会移动到那个“#chosen” div中。我知道我的代码有问题且未完成，但我不确定如何修复它或如何拆分元素，因为它们都具有相同的类。非常感谢您提供任何帮助或提示。

JS:

$(document).ready(function() {

//Audio
// var audioElement = $('audio');
//  audioElement.attr('src', 'assets/mp3/cantina.mp3');
//  audioElement.attr('autoplay', 'autoplay');
//  audioElement.loop = true; 

//Objects
var hansolo = {
    name: "Han Solo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/hansolo.jpg",
}

var chewy = {
    name: "Chewy",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/chewy.jpg",
}

var jabba = {
    name: "Jabba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/jabba.jpg",
}

var greedo = {
    name: "Greedo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/greedo.jpg",
}

var choices = [hansolo, chewy, jabba, greedo];

var charOptionsRow = $('#charOptions');
    $.each(choices, function(index, choice) {
      // Create a new div.col-lg-3 to be appended to row.
      var charOptionCol = $('<div>')
        .addClass('char-option col-lg-3');

      // Append image to col.
      var charImg = $('<img>')
        .addClass('char-img')
        .attr('src', choice.src);
      charOptionCol.append(charImg);

      // Append text to col.
      var charText = $('<h3>')
        .addClass('char-text')
        .text(choice.name);
      charOptionCol.append(charText);

      // Append column to row.
      charOptionsRow.append(charOptionCol);
});

$(document).on('click', '.char-img', 'char-text', function() {
    if (hansolo) {
        var charPick =$("#chosen");
        $('.char-img').appendTo(charPick);
        $('.char-text').appendTo(charPick);
    }
    if (chewy) {
        var charPick =$("#chosen");
        $('.char-img').appendTo(charPick);
        $('.char-text').appendTo(charPick);
    }
    if (jabba) {
        var charPick =$("#chosen");
        $('.char-img').appendTo(charPick);
        $('.char-text').appendTo(charPick);
    }
    if (greedo) {
        var charPick =$("#chosen");
        $('.char-img').appendTo(charPick);
        $('.char-text').appendTo(charPick);
    }
});
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery Game</title>

        <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    </head>
<body>

    <div class="container" style="max-width:800px;">
        <h1 align="center">Star Wars Game</h1>
        <h2 align="center" id="character-text">Choose your character:</h2>
        <div class="row" id="charOptions" style="max-width:800px;" align="center">
        </div>

        <div class="row" align="center" style="max-width:800px;">
            <!-- Choice Header -->
            <div class="col-lg-6 you" id="chosen" align="center">
                <h2 align="center" id="chosen-text" class="hidden">You</h2>
            </div>
            <!-- First Enemy Header -->
            <div class="col-lg-6 fighting" align="center">
                <h2 align="center" id="chosen-text" class="hidden">Fighting</h2>
            </div>
        </div>
        <div class="row" align="center" style="max-width:800px;">
            <!-- Enemies Header-->
            <div class="col-lg-12" id="enemies" align="center">
                <h2 align="center" id="enemies-text" class="hidden">Your Enemies</h2>
            </div>
        </div>  
            <div class="row" align="center" style="max-width:800px;">
            <!-- Enemies -->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
                    <div id="first-enemy"></div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
                    <div id="second-enemy"></div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
                    <div id="third-enemy"></div>
                </div>
            </div>

    </div>

<script src="assets/js/game.js"></script>
</body>

- willking

4个回答

0

不要监听"$(document).on(..."，而是监听$(".char-option").on("click", function() .... - 然后，在函数内部，$(this)将是被点击的元素。这样做可以让你只监听具有“char-option”类的元素的单击事件，而不是监听任何地方的单击事件。

在您的if语句中，所有这些都将解析为true。我理解意图是“如果hansolo被点击了”，但实际上你正在问“如果hansolo未定义”。

虽然我没有为您提供所有内容，但希望这能帮助您朝着正确的方向前进。

- Todd R

这非常有帮助，Todd，感谢您指引我正确的方向！ - willking

0

在点击事件中，尝试使用 $(this) 而不是 $('.char-img') 选择器。

另外，如果你将在每个 if 语句中运行相同的代码，那么就不需要检查谁被选择了。

看看这是否适用于你。

$(document).ready(function() {

  //Audio
  // var audioElement = $('audio');
  //  audioElement.attr('src', 'assets/mp3/cantina.mp3');
  //  audioElement.attr('autoplay', 'autoplay');
  //  audioElement.loop = true; 

  //Objects
  var hansolo = {
    name: "Han Solo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/7b72d15a85bf468d8af9c5b5699e02ca.png",
  };

  var chewy = {
    name: "Chewy",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/044c70c30f084ba095c35aa7e4451f0c.png",
  };

  var jabba = {
    name: "Jabba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/458ccfc9819f4f8b85116b81584f4eea.png",
  };

  var boba = {
    name: "Boba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/85458d08609f4170b5b8cdda58fca07c.png",
  };

  var choices = [hansolo, chewy, jabba, boba];

  var charOptionsRow = $('#charOptions');
  $.each(choices, function(index, choice) {
    // Create a new div.col-lg-3 to be appended to row.
    var charOptionCol = $('<div>')
      .addClass('char-option col-lg-3');

    // Append image to col.
    var charImg = $('<img>')
      .addClass('char-img')
      .attr('src', choice.src);
    charOptionCol.append(charImg);

    // Append text to col.
    var charText = $('<h3>')
      .addClass('char-text')
      .text(choice.name);
    charOptionCol.append(charText);

    // Append column to row.
    charOptionsRow.append(charOptionCol);
  });

  $('.char-option').on('click', function() {
    var $charPick = $("#chosen");
    var $chosen = $('#chosen-text');
    var $img = $(this).find('img').clone();
    var $header = $(this).find('h3').clone();
    var name = $header.text();

    $chosen.children('span').html(name);
    $chosen.removeClass('hidden');

    $charPick.find('img').remove();
    $charPick.find('h3').remove();
    $charPick.append($img).append($header);

    $('html, body').animate({
      scrollTop: $(document).height()
    });
  });
});

#chosen .char-img {
   border: 0.2em solid black;
}

<head>
  <meta charset="UTF-8">
  <title>JQuery Game</title>
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <div class="container" style="max-width:800px;">
    <h1 align="center">Star Wars Game</h1>
    <h2 align="center" id="character-text">Choose your character:</h2>
    <div class="row" id="charOptions" style="max-width:800px;" align="center">
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Choice Header -->
      <div class="col-lg-6 you" id="chosen" align="center">
        <h2 align="center" id="chosen-text" class="hidden">You've chosen <span class="chosen-name"></span></h2>
      </div>
      <!-- First Enemy Header -->
      <div class="col-lg-6 fighting" align="center">
        <h2 align="center" id="chosen-text" class="hidden">Fighting</h2>
      </div>
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Enemies Header-->
      <div class="col-lg-12" id="enemies" align="center">
        <h2 align="center" id="enemies-text" class="hidden">Your Enemies</h2>
      </div>
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Enemies -->
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="first-enemy"></div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="second-enemy"></div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="third-enemy"></div>
      </div>
    </div>
  </div>
</body>

- apires

我真的很喜欢这种方法，代码很简洁，现在$(this)更加有意义了。谢谢你的帮助。 - willking

@willking，我已经编辑了我的答案。可能不是最好的方法，但我希望它能帮助你或教你一些新东西！ - apires

0

$(document).ready(function() {

  //Audio
  // var audioElement = $('audio');
  //  audioElement.attr('src', 'assets/mp3/cantina.mp3');
  //  audioElement.attr('autoplay', 'autoplay');
  //  audioElement.loop = true; 

  //Objects
  var hansolo = {
    name: "Han Solo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/7b72d15a85bf468d8af9c5b5699e02ca.png",
  };

  var chewy = {
    name: "Chewy",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/044c70c30f084ba095c35aa7e4451f0c.png",
  };

  var jabba = {
    name: "Jabba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/458ccfc9819f4f8b85116b81584f4eea.png",
  };

  var boba = {
    name: "Boba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "https://image.prntscr.com/image/85458d08609f4170b5b8cdda58fca07c.png",
  };

  var choices = [hansolo, chewy, jabba, boba];

  var charOptionsRow = $('#charOptions');
  $.each(choices, function(index, choice) {
    // Create a new div.col-lg-3 to be appended to row.
    var charOptionCol = $('<div>')
      .addClass('char-option col-lg-3');

    // Append image to col.
    var charImg = $('<img>')
      .addClass('char-img')
      .attr('src', choice.src);
    charOptionCol.append(charImg);

    // Append text to col.
    var charText = $('<h3>')
      .addClass('char-text')
      .text(choice.name);
    charOptionCol.append(charText);

    // Append column to row.
    charOptionsRow.append(charOptionCol);
  });

  $('.char-img, .char-text').on('click', function() {
    $('#chosen-img').remove();
    $('#chosen').prepend('<img id="chosen-img"/>');
    $('#chosen-img').css({
      'border': '2px solid red'
    }).attr('src', $(this).parent().find('img').attr('src'));
    $('h2', '#chosen').text("You Choose: " + $(this).parent().find('.char-text').text()).removeClass('hidden').show();
    $("html, body").animate({
      scrollTop: $(document).height()
    }, 100);
    //console.log($(this).attr('src'));
    // console.log($(this).parent().find('.char-text').text());
  });
});

<head>
  <meta charset="UTF-8">
  <title>JQuery Game</title>
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <div class="container" style="max-width:800px;">
    <h1 align="center">Star Wars Game</h1>
    <h2 align="center" id="character-text">Choose your character:</h2>
    <div class="row" id="charOptions" style="max-width:800px;" align="center">
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Choice Header -->
      <div class="col-lg-6 you" id="chosen" align="center">
        <h2 align="center" id="chosen-text" class="hidden">You</h2>
      </div>
      <!-- First Enemy Header -->
      <div class="col-lg-6 fighting" align="center">
        <h2 align="center" id="chosen-text" class="hidden">Fighting</h2>
      </div>
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Enemies Header-->
      <div class="col-lg-12" id="enemies" align="center">
        <h2 align="center" id="enemies-text" class="hidden">Your Enemies</h2>
      </div>
    </div>
    <div class="row" align="center" style="max-width:800px;">
      <!-- Enemies -->
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="first-enemy"></div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="second-enemy"></div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
        <div id="third-enemy"></div>
      </div>
    </div>
  </div>
</body>

- Woodrow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Roub · Accepted Answer

你正在一次性移动所有的 char-img 和 char-text 项目（除了几个拼写错误）-- 对 $('.char-img') 的引用并不知道你指的是哪一个被点击的。相反，使用 this 告诉你哪个元素被点击了。然后，获取相邻的文本或图像，并仅移动这两个元素。

$(document).on('click', '.char-img, .char-text', function() {
  var el = $(this),
      img, txt;

  if (el.hasClass('char-img')) {
    img = el;
    txt = el.next('.char-text');
  } else {
    txt = el;
    img = el.prev('.char-img');
  }

  $('#chosen').append(img).append(txt);
});

$(document).ready(function() {

  //Objects
  var hansolo = {
    name: "Han Solo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/hansolo.jpg",
  }

  var chewy = {
    name: "Chewy",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/chewy.jpg",
  }

  var jabba = {
    name: "Jabba",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/jabba.jpg",
  }

  var greedo = {
    name: "Greedo",
    attack: 10,
    hp: 20,
    counter: 0,
    src: "assets/images/greedo.jpg",
  }

  var choices = [hansolo, chewy, jabba, greedo];

  var charOptionsRow = $('#charOptions');
  $.each(choices, function(index, choice) {
    // Create a new div.col-lg-3 to be appended to row.
    var charOptionCol = $('<div>')
      .addClass('char-option col-lg-3');

    // Append image to col.
    var charImg = $('<img>')
      .addClass('char-img')
      .attr('src', choice.src);
    charOptionCol.append(charImg);

    // Append text to col.
    var charText = $('<h3>')
      .addClass('char-text')
      .text(choice.name);
    charOptionCol.append(charText);

    // Append column to row.
    charOptionsRow.append(charOptionCol);
  });

  $(document).on('click', '.char-img, .char-text', function() {
    var el = $(this),
      img, txt;
      
    if (el.hasClass('char-img')) {
      img = el;
      txt = el.next('.char-text');
    } else {
      txt = el;
      img = el.prev('.char-img');
    }

    $('#chosen').append(img).append(txt);
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="container" style="max-width:800px;">
  <h1 align="center">Star Wars Game</h1>
  <h2 align="center" id="character-text">Choose your character:</h2>
  <div class="row" id="charOptions" style="max-width:800px;" align="center">
  </div>

  <div class="row" align="center" style="max-width:800px;">
    <!-- Choice Header -->
    <div class="col-lg-6 you" id="chosen" align="center">
      <h2 align="center" id="chosen-text" class="hidden">You</h2>
    </div>
    <!-- First Enemy Header -->
    <div class="col-lg-6 fighting" align="center">
      <h2 align="center" id="chosen-text" class="hidden">Fighting</h2>
    </div>
  </div>
  <div class="row" align="center" style="max-width:800px;">
    <!-- Enemies Header-->
    <div class="col-lg-12" id="enemies" align="center">
      <h2 align="center" id="enemies-text" class="hidden">Your Enemies</h2>
    </div>
  </div>
  <div class="row" align="center" style="max-width:800px;">
    <!-- Enemies -->
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
      <div id="first-enemy"></div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
      <div id="second-enemy"></div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
      <div id="third-enemy"></div>
    </div>
  </div>

</div>