jQuery - hide () and show () does not run correctly

2

I have items that in a paragraph is displayed the total of the same. When I remove one of these items, I'm working with 2 paragraphs with the same code so I hide one and show the other so I can display the correct value. However, when I click the button that is to do this function, only one of them is changed, while the other continues with the original code.

Paragraph code:

<?php foreach($this->getItems() as $_index=>$_item): ?>
<p class="number" id="numberOriginal"><?php echo $this->__('Item %d of %d', $_index+1, $this->countItems()) ?></p>
<p class="number" id="numberModificado" style="display: none;"><?php echo $this->__('Item %d of %d', $_index+1, $this->countItems()-1) ?></p>
<?php endforeach; ?>

Code that "fires" this function:

$j('input[name=isgift]').click(function(){
  if($j('#isgift1').is(':checked')){
  mudarNumber();
  }
});

Function code to change <p> :

function mudarNumber(){
  $j('#numberOriginal').hide();
  $j('#numberModificado').show();
}

Example:

Item 1 of this list <p> looks like this:

<p class="number" id="numberOriginal" style="display: none;">Item 1 de 3</p>
<p class="number" id="numberModificado" style="">Item 1 de 2</p>

Item 2 of this list <p> looks like this:

<p class="number" id="numberOriginal">Item 2 de 3</p>
<p class="number" id="numberModificado" style="display: none;">Item 2 de 2</p>
    
asked by anonymous 15.09.2017 / 20:30

1 answer

2

Try changing the trigger tag of the function by:

$j('input[name=isgift]').on('click', function () {
  if ($j('#isgift1').is(':checked')) {
    $j('.numberOriginal').hide();
    $j('.numberModificado').show();
  }
});

And the PHP code, change to:

<?php foreach($this->getItems() as $_index=>$_item): ?>
  <p class="number numberOriginal"><?php echo $this->__('Item %d of %d', $_index+1, $this->countItems()) ?></p>
  <p class="number numberModificado" style="display: none;"><?php echo $this->__('Item %d of %d', $_index+1, $this->countItems()-1) ?></p>
<?php endforeach; ?>

In this way, you can discard this piece of code:

function mudarNumber(){
  $j('#numberOriginal').hide();
  $j('#numberModificado').show();
}
    
15.09.2017 / 20:35