Question

我想在点击一种颜色作为背景颜色时显示刻度图像。我的phtml编码是

<?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');
}

当我点击特定颜色时，仅显示第一种颜色的刻度图像，但我想获得我点击的颜色的图像，如果我选择另一种颜色，则前一刻度标记应该消失。

Answer 1

您遇到的问题是，整个页面会重复id的'tick'，这是无效的，因为id必须是唯一的。您应该将其更改为常见的class。

您还应该使用不显眼的JS来附加事件处理程序，而不是过时的on*事件属性。试试这个：

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

ID必须是唯一的。在循环中，为每个刻度添加唯一ID：

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

在你传递id的selectColor中，使用它：

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

显示特定ID的单击颜色时的刻度图像

2 个答案: