добавление изображений в div jquery

ProgramBox

добавление изображений в div jquery

Post author:admin
Запись опубликована:22 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть контейнер div, который содержит еще 4 раздела, и каждый из этих разделов имеет заголовок, изображение и тег абзаца. То, что я делаю, — это игра, в которой, когда я нажимаю на один из разделов, изображений, оставшиеся 3 изображения, которые не были нажаты, переходят в раздел «Перейти в другой раздел» с классом «враги». Как бы я это сделал, не имея набора функций onclick для каждого символа?

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Week 4 Game</title>
        <link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">

        <!-- Added link to the jQuery Library -->
        <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src = "assets/javascript/game.js">    </script>

    </head>
    <body>
    <div class = "characters">
    <div class="charContainer">
        <h2 id="c1"></h2>
        <img class="vade" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer1">
        <h2 id="c2"></h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer2">
        <h2 id="c3"></h2>
        <img class="obi" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer3">
        <h2 id="c4"></h2>
        <img class="dmaul" src="assets/images/maul.png">
        <p id="c4hp" data-hp = "180"></p>
    </div>
    </div>
    <div id="your">
    <h2>Your Character</h2>
    <!-- <img class="dmaul" src="assets/images/maul.png"> -->
    </div>
    </body>
    </html>

jQuery

     $(document).ready(function(){
        $('#c1').text("Darth Vader");
        $('#c2').text("Luke Skywalker");
        $('#c3').text("Obi Won");
        $('#c4').text("Darth Maul");
        var health = $('#c1hp').data('hp');
        $('#c1hp').html(health);
        var health = $('#c2hp').data('hp');
        $('#c2hp').html(health);
        var health = $('#c3hp').data('hp');
        $('#c3hp').html(health);
        var health = $('#c4hp').data('hp');
        $('#c4hp').html(health);

        $('.charContainer').on('click', function(){
            var yourCharacter = $(this);
            $('#your').append(yourCharacter);
        });

    });

Я пытаюсь переместить любой из <div> s .charContainer , .charContainer1 , .charContainer2 , .charContainer3 включая заголовок, <img> и <p> тег внутри него в идентификатор <div> with #your .

Обновление: я нашел решение, выполнив .каждая функция для charContainer. Вместо того, чтобы иметь 4 разных контейнера символов, я просто назвал их одним и тем же классом и в .для каждой функции, для каждого из этих классов, которые не были добавлены к выбранному символьному полю, я добавил класс с именем .foes, чтобы теперь я мог различать «выбранные» и те, которые не были выбраны.

1. Я попробовал просто использовать функцию onlclick для каждого символа и кучу других if внутри

2. Вы можете назначить функцию onclick всем разделам класса и использовать this для динамического достижения желаемого поведения.

3. Поделитесь некоторым кодом, чтобы другим было намного проще разобраться в вашей проблеме.

Ответ №1:

Я полагаю, что ваша ошибка заключалась в том, что у вас разные классы для «charContainer» (1,2,3,4). В вашем случае событие должно выглядеть так

  $('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){

Также, как вы это делаете — вы добавляете несколько символов, нажимая на них один за другим. Как насчет этого:

 $(function() {
    $('.charContainer').on('click', function(){
      var yourCharacter = $(this);
      $('#your').empty().append(yourCharacter.clone());
    });
 });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
    <div class="charContainer">
        <h2 id="c1">Darth Vader</h2>
        <img class="vader" src="assets/images/vader.jpg">
        <p id="c1hp" data-hp = "120"></p>
    </div>
    <div class="charContainer">
        <h2 id="c2">Luke Skywalker</h2>
        <img class="skywalker" src="assets/images/luke.jpg">
        <p id="c2hp" data-hp = "100"></p>
    </div>
    <div class="charContainer">
        <h2 id="c3">Obi Wan</h2>
        <img class="obiwan" src="assets/images/obiwan.jpg">
        <p id="c3hp" data-hp = "150"></p>
    </div>
    <div class="charContainer">
        <h2 id="c4">Darth Maul</h2>
        <img class="dmaul" src="assets/images/maul.png">
        <p id="c4hp" data-hp = "180"></p>
    </div>
    </div>
    <div id="your">
    <h2>Your Character</h2>
    </div>

Развернуть фрагмент

1. Хорошо, я сделаю это, но мой предыдущий код работает, когда я нажимаю на выбранный класс div по щелчку мыши, но только когда я нажимаю на div-часть div. Как я могу сделать так, чтобы при щелчке в любом месте внутри этого div он перемещался туда. У меня есть тег h2, тег p и изображение в этом div, но функция onclick не будет отвечать, если я не щелкну рядом с краем поля div

2. Ваш предыдущий код работает, только если вы нажмете где-нибудь на первом div, потому что $(‘.charContainer’) выбирает только первый. Измените код, как я вам сказал, и он будет работать. Также, как вы можете видеть из моего фрагмента — он работает в любом месте, где вы нажимаете — h2, изображение, где-то в пустом пространстве вокруг изображения. Возможно, вам потребуется немного прочитать о четных пузырьках.

Метки: добавление изображений в div jquery