时间戳

首页 > 解决方案 > PHP 多读少读 - Magento 2

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>

标签： javascriptphpmagentomagento2

解决方案

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

首先为每个<div class="more">or附加一个唯一属性<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
});

..反之亦然，少读。

推荐阅读