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

我为Magento 2网上商店制作了一个阅读更多，阅读更少的脚本。这用于类别页面，其中有可供选择的子类别分类，每个子类别都有描述。

问题：如果我单击阅读更多，子类别的所有描述将扩展，而不仅仅是我单击的子类别的描述阅读更多。我正在学习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>

最佳答案

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

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

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

<div id="read-less-block" class="cat-<?php echo $_subCategory->getId(); ?>">
    <!-- my "read less" content -->
    <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
});

..反之亦然。

关于javascript - PHP阅读更多阅读更少-Magento 2，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51541200/