2015-08-12 34 views
13

Ho molti pulsanti che hanno la stessa classe ma id diversi su ciascuno. Il seguente pulsante html viene aggiunto accanto a ciascun elemento $ $.jquery - cambia il testo del pulsante al clic funziona solo al secondo clic

<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?> </button> 

Ora voglio modificare il testo del singolo pulsante in base a se viene fatto clic. Ad esempio, se si fa clic su un pulsante e contiene il testo "Promuovi nella home page", il testo dovrebbe essere modificato in "Rimuovi dalla home page" e viceversa. Ho usato il seguente codice jquery per farlo.

$('.frontpage').on('click', function() { 
    var id = this.id; 
    $("#"+id).html($("#"+id).html() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage"); 
}); 

Ora, questo codice funziona ma solo sul secondo scatto. Ad esempio, quando faccio clic su un pulsante di promozione per la home page, il testo non cambierà, ma se clicco di nuovo, il testo cambia. Che cosa sto facendo di sbagliato? Per favore aiuto.

+1

Quando si esegue il rendering della pagina, il pulsante 'id' ha il valore corretto? Perché, se provo in un semplice codice HTML (rimuovendo il codice PHP), il tuo codice funziona: https://jsfiddle.net/aforni/26z3z0xo/ – Andrea

+0

La tua pagina va ad un'altra pagina, significa che il pulsante collega ad altre pagine e pagina onclick è rinfrescante? – locateganesh

+0

Grazie per aver dedicato del tempo per provarlo su jsfiddle. Il problema era lo spazio extra indicato da @DGS – jimmypage

risposta

9

Sembra che si potrebbe essere aggiunta a distanza in più quando si echo fuori da PHP

Prova

<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?></button> 

Avviso spazio rimosso dopo l'eco . Ciò significa che $("#"+id).html() == "Promote to homepage" non sarà mai mai vero tuttavia $("#"+id).html() == "Promote to homepage " Sarebbe

+2

Questo è il problema principale. Per la prima volta è impostato 'Promuovi in ​​homepage' dalla parte opposta. :) –

+0

Grazie mille ... Il problema era davvero la spaziatura extra. Un errore così stupido !! – jimmypage

7

In questo caso è necessario utilizzare text() anziché html() in quanto ha un testo semplice. Prenditi cura degli spazi. Utilizzare $.trim prima di confrontare i valori. Prova con -

$('.frontpage').on('click', function() { 
    var $this = $(this); 
    var text = ($.trim($this.text()) == "Promote to homepage") ? "Remove from homepage" : "Promote to homepage"; 
    $this.text(text); 
}); 

FIDDLE

+0

Non spiega il comportamento dell'OP –

+0

@ A.Wolff Sì. Il problema è con lo 'spazio'. –

+0

Ma funziona anche con 'html()': https://jsfiddle.net/aforni/26z3z0xo/ – Andrea

5

Avvolgi tutte le tue funzioni sull'evento dom ready.

$(function() { 
    $('.frontpage').on('click', function() { 
     var curTxt = $(this).text() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage"; 
     $(this).text(curTxt) 
    }); 
}) 
3

Questo dovrebbe fare il trucco per voi.

$('.frontpage').on('click', function() { 

    if ($.trim($(this).text()) === 'Promote to homepage') { 
     $(this).text('Remove from homepage'); 
    } 

    else if ($.trim($(this).text()) === 'Remove from homepage') { 
     $(this).text('Promote to homepage');   
    } 
}); 
Problemi correlati