Tick Bild anzeigen, wenn Farbe für eine bestimmte ID klicken

Question

Ich möchte Tick Bild anzeigen, wenn Sie eine Farbe, die eine Hintergrundfarbe ist klicken. Meine phtml Codierung ist

<?php foreach($this->getSolidColors() as $key => $_solidColors) : ?> 
    <li id="font-colr-<?php echo $_solidColors['id'] ?>" onclick="selectcolor("<?php echo $_solidColors['id'] ?>");" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" class="cursor font-color" style="background: #<?php echo $_solidColors['hexa'] ?>" data-color="#<?php echo $_solidColors['hexa'] ?>"> 
     <span class="sprite"></span> 
     <img id="tick" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" width="80%" height="80%" style="display:none; padding-left:10px;"> 
    </li> 
<?php endforeach; ?> 

function selectcolor() { 
    var id = jQuery('#font-colr').attr('data-id'); 
    jQuery('#tick').css('display', 'block'); 
} 

Wenn ich bestimmte Farbe klicken Sie die Zecke Bild nur für die erste Farbe angezeigt wird, aber ich möchte Bild erhalten, für die Farbe, die ich angeklickt und wenn ich wählen Sie eine andere Farbe, um die vorherigen tick Markierung sollte verschwunden sein.

Answer 1

Das Problem, das Sie haben, ist, dass die id von ‚tick 'wird auf Ihrer gesamten Seite wiederholt, was ungültig ist, da id eindeutig sein muss. Sie sollten das stattdessen in einen gemeinsamen class ändern.

Sie sollten auch unauffällige JS verwenden, um Ihre Ereignishandler anstelle der veralteten on* Ereignisattribute anzuhängen. Versuchen Sie folgendes:

<?php foreach($this->getSolidColors() as $key => $_solidColors) : ?> 
    <li class="cursor font-color" id="font-colr-<?php echo $_solidColors['id'] ?>" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" style="background: #<?php echo $_solidColors['hexa'] ?>" data-color="#<?php echo $_solidColors['hexa'] ?>"> 
     <span class="sprite"></span> 
     <img class="tick" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>"> 
    </li> 
<?php endforeach; ?> 

.tick { 
    width: 80%; 
    height: 80% 
    display: none; 
    padding-left: 10px; 
} 

$('li.font-color').click(function() { 
    var id = $(this).data('id'); // I presume you use this value somewhere in your code? 
    $(this).find('.tick').show(); 
}); 

Answer 2

IDs müssen eindeutig sein. In der Schleife, fügen Sie eine eindeutige ID für jeden tick:

<li id="font-colr-<?php echo $_solidColors['id'] ?>" onclick="selectcolor("<?php echo $_solidColors['id'] ?>");" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" 
     class="cursor font-color" 
     style="background: #<?php echo $_solidColors['hexa'] ?>" 
     data-color="#<?php echo $_solidColors['hexa'] ?>"> 
    <span class="sprite"></span> 
    <img id="tick-<?php echo $_solidColors['id'] ?>" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" width="80%" height="80%" style="display:none; padding-left:10px;"> 
    </li> 

und in Ihrem select, wo Sie die ID übergeben, verwendet es:

function selectcolor(id){ 
    jQuery('#tick-'+id).css('display', 'block'); 
}