Question

我为Magento 2网上商店制作了一个阅读更多，阅读更少的脚本。在类别页面上使用该选项，其中可以选择serval子类别块，每个子类别都有描述。

问题：如果我单击阅读更多，则所有子类别的描述都会扩展，而不是仅扩展我单击的子类别的描述。阅读更多

我开始学习PHP和Magento 2，但我无法解决，有人知道解决方案吗？

  <div class="product description product-item-description">
                                <div class="more">
                                <?php  if ($_subCategory->getDescription()) {
        $string = strip_tags($_subCategory->getDescription());

        if (strlen($string) > 250) {
            // truncate string
            $stringCut = substr($string, 0, 250);
            $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Lees meer</a>';
        }
        echo $string;
        ?>
        </div>
    <?php
    }else {?>
        <?php /* @escapeNotVerified */ echo $_attributeValue; 
        }
    ?>
    </div>

    <div class="less" style="display:none">
        <?php echo $_subCategory->getDescription(); ?>
        <a href="javascript:void(0);" class="readless">Lees minder</a>
    </div>
    <script type="text/javascript">
        console.log('test');
        require(["jquery"],function($){
            $('.readmore').on("click",function(){
                $('.less').show();
                $('.more').hide();
            });
            $('.readless').on("click",function(){
                $('.less').hide();
                $('.more').show();
            });
        });
    </script>
    </div>

Answer 1

这是因为，当您键入$('.less').hide();时，这会捕获具有属性class='less'的每个元素。这就是我要克服的方式：

首先为每个<div class="more">或<div class="less">附加一个唯一的属性-在这种情况下，我们使用class属性：（并将'more'或'less'移至 id < / strong>）

<div id="read-more-block" class="cat-<?php echo $_subCategory->getId(); ?>">  <a class="link" href="#read-more-block">Read Less</a> </div> <div id="read-less-block" class="cat-<?php echo $_subCategory->getId(); ?>">  <a class="link" href="#read-less-block">Read More</a> </div>

我们现在为每个子类别都有一个 read-more-block 和一个 read-less-block 。当我们单击内部的链接时，将触发一个jQuery事件，该事件将自身隐藏并显示另一个。

然后，在您的jQuery中：

$('#read-more-block .link').on('click', function() { var $readLessBlock = $('#read-less-block.' + $(this).parent().attr('class')); $readLessBlock.show(); //Show the read less block $(this).parent().hide(); //Hide the read more block });

..反之亦然。

PHP阅读更多阅读更少-Magento 2

1 个答案: