Как я могу обновить атрибуты с помощью jQuery?

ProgramBox

Как я могу обновить атрибуты с помощью jQuery?

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

#javascript #jquery

Вопрос:

 $(document).ready(function() {

    var hero_image = new Array();
    hero_image[0] = new Image();
    hero_image[0].src = 'assets/images/link.png';
    hero_image[0].id = 'image';

    hero_image[1] = new Image();
    hero_image[1].src = 'assets/images/bongo.png';
    hero_image[1].id = 'image';

    hero_image[2] = new Image();
    hero_image[2].src = 'assets/images/gandondorf.jpg';
    hero_image[2].id = 'image';

    hero_image[3] = new Image();
    hero_image[3].src = 'assets/images/queen.png';
    hero_image[3].id = 'image';

  var young_hero = ["Link", "Bongo Bongo", "Gandondorf", "Queen Gohma"];
  var health = [100, 70, 120, 50];
  var attack_power = [];
  var counter_power = [];

console.log(hero_image[0]);

function it_is_over_9000(){

  for (var i = 0; i < young_hero.length; i  ) {

    var x = Math.floor(Math.random(attack_power)*20)   3;
    var y = Math.floor(Math.random(attack_power)*10)   3;

    attack_power.push(x);
    counter_power.push(y);

  }

}

function ready_board(){

  it_is_over_9000();

  for (var i = 0; i < young_hero.length; i  ) {
    var hero_btns = $("<button>");
    hero_btns.addClass("hero hero_button");
    hero_btns.attr({
      "data-name": young_hero[i],
      "data-health": health[i],
      "data-image": hero_image[i],
      "data-attack": attack_power[i],
      "data-counter": counter_power[i],
      "data-index": i
    });


    hero_btns.text(young_hero[i]);
    hero_btns.append(hero_image[i]);
    hero_btns.append(health[i]);

    $("#buttons").append(hero_btns);

  }

}

function char(){

 $(".hero_button").on("click", function() {
    var hero = $(this);
    var hero_select = hero.data('index');


    for (var i = 0; i < young_hero.length; i  ) {

      //var attack = ;

      if (i != hero_select){

        var enemies = $("<button>");
        enemies.addClass("hero enemy");

        enemies.attr({
          "data-power" : it_is_over_9000(),
          "data-name": young_hero[i],
          "data-health": health[i],
          "data-image": hero_image[i],
          "data-attack": attack_power[i],
          "data-counter": counter_power[i],
          "data-index": i
        });

        enemies.text(young_hero[i]);
        enemies.append(hero_image[i]);
        enemies.append(health[i]);

        $("#battle").append(enemies);

      }

    }

    $("#buttons").html($(this).data('name','health','image'));

    defender();

  });
}

function defender(){

  $(".enemy").on("click", function() {

    var enemy = $(this);
    var enemy_select = enemy.data("index");
    console.log(enemy_select);
    for (var i = 0; i < young_hero.length; i  ) {

      if (i == enemy_select) {

        var defender = $("<button>");
        defender.addClass("hero defender");

        defender.attr({
          "data-name": young_hero[i],
          "data-health": health[i],
          "data-image": hero_image[i],
          "data-attack": attack_power[i],
          "data-counter": counter_power[i],
          "data-index": i
        });

        defender.text(young_hero[i]);
        defender.append(hero_image[i]);
        defender.append(health[i]);

        $("#defend").append(defender);

        $(this).remove();

      }

    }
  });

}

  $(".defend_button").on("click" , function(){

      if($(".defender").data("health") == 0){

        $(".defender").remove();

      } 

        $(".defender").attr({
          "data-health":  $(".defender").data("health") - $(".hero_button").data("attack")
        });       
  });

ready_board();
char();

});

Я пытаюсь создать RPG-игру, и у меня персонажи генерируются так, как я хочу, но при $ («.defend_button»).при («click» , функция() в конце не обновляет работоспособность данных должным образом. Он обновляется только один раз, но после многих нажатий на кнопку защиты он не обновляется с первого раза.

     <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>

      <meta charset="UTF-8">
    <title>Zelda</title>

    <script type='text/javascript' src='https://code.jquery.com/jquery-2.2.0.min.js'></script>

    <script type = "text/javascript" src = "assets/javascript/game.js"></script>

    <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">

</head>

<style type="text/css">
    .hero { width: 125px; height:150px; border-style: solid; padding: 2px; float: left; margin: 2px; float: left; }

  .letter-button-color { color: darkcyan; }

  .fridge-color { color: orange; }

  #display { margin-top:78px; height:500px; width:220px; margin-left:60px; }

  #buttons { padding-top:60px; }

  #clear { margin-left: 20px; font-size: 25px; color: black; border-style: solid; width: 100px; }

    #image{width: 100px; height: 100px; margin-left: 10px;  }

</style>

<body>

<div class="row">

<div class="col-md-8">Select Your Character</div>

</div>

<div class="row">

<div id="buttons" class="col-md-8"></div>



</div>

<div class="row">

<div id="battle" class="col-md-8">


</div>

</div>

<div class="row">
    <div class="col-md-8">
        <button class="btn btn-primary defend_button">Defend</button>
    </div>
</div>

<div class="row">

<div id="defend">


</div>

</div>





</body>
</html>

1. Итак, сколько у вас защитников? Вы применяете / уменьшаете data-health ко всем из них, используя .hero_button который применяется ко многим кнопкам?

2. Весь код работает, единственная проблема в том, что он обновляется только один раз

3. скинуть это на jsfiddle?

4. У вас есть 4 защитника и 4 героя. В .defend_button click вы использовали селектор классов jQuery $(".defender") . Теперь есть 4 элемента, которые соответствуют этому, ваша процедура обновления, поскольку все это работает, в конечном итоге будет применена ко всем 4. И атрибут работоспособности данных, который вы устанавливаете $(".defender").attr({ "data-health": $(".defender").data("health") - $(".hero_button").data("attack") }); , будет соответствовать первому элементу, который он находит. мы не знаем намерения / логики defender, поэтому не уверены, что это то, что должно произойти

Ответ №1:

Вы должны использовать .data() для обновления значения работоспособности.

 var battleResult = $(".defender").data("health") - $(".hero_button").data("attack");
console.log("battleResult should be: " battleResult );

$(".defender").data({
    "health":  battleResult
});

Я немного поиграл в вашу игру.
Я также нашел, как обновить отображение работоспособности под изображением…
Поскольку только обновление данных ничего не меняло на экране.

Итак, я оставил приведенный выше код там, чтобы вы увидели, что он эффективно работает.
Но поскольку вам нужно заново создать кнопку для обновления работоспособности на scrreen… Это отчасти бесполезно.

Я также исправил условие смерти
из if($(".defender").data("health") == 0){
Для if($(".defender").data("health") <= 0){

Я должен остановиться здесь, прежде чем многое менять.
Смотрите это в CodePen

Проверьте свой цикл в it_is_over_9000() , потому что я думаю, что он выполняется бесполезно слишком часто.
И мертвый защитник должен быть «похоронен» (смеется).
Потому что, когда он отключен, нажатие на кнопку защиты является своего рода повторным восстановлением. 😉

1. Быстрый вопрос. Я думал, что. данные использовались только для захвата данных, а не для их установки?

2. Поищите .data() документацию . .data(key,value) сохраняет значение, в то время как .data(key) возвращает значение. 😉

3. То, что я использовал выше, .data(object) предназначено для хранения. Если вы используете .data() (без аргумента), он возвращает ВСЕ данные как объект.

Ответ №2:

Попробуйте установить атрибут следующим образом. Кроме того, я рекомендую ввести $(".defender") переменную, чтобы вы не запрашивали ее каждый раз.

 var defender = $(".defender");

var loweredHealth = defender.data("health") -  $(".hero_button").data("attack");
defender.attr('data-health`, loweredHealth);

Обновить:

Похоже, что $('.defender') вызов вернет несколько элементов. Вам нужно либо выбрать определенный defender , либо выполнить итерацию по ним по отдельности, вот так:

 $('.defender').each(function(i, nextDefender) {
    var loweredHealth = nextDefender.data("health") -  $(".hero_button").data("attack");
    nextDefender.attr('data-health`, loweredHealth);
});`