var lootis = $('div > span');
var loot = 0

function loots() {
  lootis.each(function(e) {
    $(this).toggle(e >= loot && e < loot + 1);
  });
}
loots();

$('div').on('click', 'span', function(){
  loot = loot + 1;
  loots();
});

//Problem Starts Here:
$('div').on('contextmenu', 'span', function(){
  $('div').html('<span>Loot4</span> <span>Loot5</span> <span>Loot6</span>');
  loots();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Loot1</span>
  <span>Loot2</span>
  <span>Loot3</span>
</div>

Hola, tengo este código aquí, al hacer clic en el lapso se cambia al siguiente lapso

Al hacer clic con el botón derecho, la extensión cambia a 4 5 6, pero la función loots () no se aplica a ellos, se supone que es como 1 2 3, donde solo aparece un intervalo por clic. ¿Cuál es el problema en el código? ?

1
AXAI 28 oct. 2017 a las 20:58

3 respuestas

La mejor respuesta

Al hacer clic con el botón derecho, los espacios se extienden a 4 5 6, pero la función loots () no se aplica a ellos

Obtiene los elementos dom una vez al comienzo del código JS:

var lootis = $('div > span');

Pero cuando cambia el innerHTML de <div>:

$('div').html('<span>Loot4</span> <span>Loot5</span> <span>Loot6</span>');

El lootis todavía hace referencia a los elementos antiguos y no a los nuevos. Todo lo que necesitas hacer es recuperar los elementos del dom:

(function() {

  var lootis = $('div > span');
  var loot = 0

  function loots() {
    lootis.each(function(e) {
      $(this).toggle(e >= loot && e < loot + 1);
    });
  }
  loots();

  $('div').on('click', 'span', function() {;
    loot = loot + 1;
    loots();
    console.log("click");
  });

  //Problem Starts Here:
  $('div').on('contextmenu', 'span', function() {
    $('div').html('<span>Loot4</span> <span>Loot5</span> <span>Loot6</span>');
    lootis = $('div > span'); //getting the new spans in the changed div
  });

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span>Loot1</span>
  <span>Loot2</span>
  <span>Loot3</span>
</div>
2
Isac 28 oct. 2017 a las 18:19

Prueba esto

(function() {

var lootis = $('div > span');
var loot = 0

function loots() {
  lootis.each(function(e) {
    $(this).toggle(e >= loot && e < loot + 1);
  });
}
loots();

$('div').on('click', 'span', function(){
  loot = loot + 1;
  loots();
});

//Problem Starts Here:
$('div').on('contextmenu', 'span', function(){
  $('div').html('<span>Loot4</span> <span>Loot5</span> <span>Loot6</span>');
});

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span>Loot1</span>
  <span>Loot2</span>
  <span>Loot3</span>
</div>
0
Nisal Edu 28 oct. 2017 a las 18:02

Reasigne sus variables después de cambiar html de div ......... como se muestra a continuación

 $('div').on('contextmenu', 'span', function(){
      $('div').html('<span>Loot5</span> <span>Loot6</span><span>Loot7</span>');
      lootis = $('div > span');
      loot = 0
      loots();
    });
0
santosh 28 oct. 2017 a las 18:27