如何在 foreach 中阅读更多文本

Question

I working Yii2 Framework, I want to read more text of each element in foreach. As follows: My foreach:

<?php foreach ($queryUserContractor as $key => $value): ?>
...
<p class="text_content_rating" id="<?= $value->user_id ?>"><?= AcpHelper::shortDesc(RatingContractor::getContentRatingLatestById($value->user_id), 400) ?>
                                                <a class="text_load_more" id="text_load_more">Read more</a></p>
                                            <p class="text_content_rating_full display_none"><?= RatingContractor::getContentRatingLatestById($value->user_id) ?>
                                                <a class="text_hide" id="text_hide">Hide</a></p>
<?php endforeach; ?>

My JS:

$(document).ready(function () {
    $(document).on('click', '#text_load_more', function (e) {
        $(".text_content_rating_full").removeClass("display_none");
        $(".text_content_rating").addClass("display_none");
    });
    $(document).on('click', '#text_hide', function (e) {
        $(".text_content_rating_full").addClass("display_none");
        $(".text_content_rating").removeClass("display_none");
    });
});

My css:

p.display_none {
        display: none;
    }

Help me, thankall.

Answer 1

You can give some outer div to your elements and then whenever user click on a tag check if it has text_load_more depending on this add/remove display_none class from p tags.

Demo Code :

 $(document).on('click', '.text_load_more,.text_hide', function(e) { var selector = $(this).closest(".outer") //check if a has class if ($(this).hasClass("text_load_more")) { //remove class from full and add class to rating selector.find(".text_content_rating_full").removeClass("display_none"); selector.find(".text_content_rating").addClass("display_none"); } else { selector.find(".text_content_rating_full").addClass("display_none"); selector.find(".text_content_rating").removeClass("display_none"); } });

 .display_none { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <?--added outer div--> <div class="outer"> <p class="text_content_rating" id="<?= $value->user_id?>">abcdclhehclecece <a class="text_load_more">Read more</a></p> <p class="text_content_rating_full display_none">yxhcgjjechgekjcehk <a class="text_hide">Hide</a></p> </div> <div class="outer"> <p class="text_content_rating" id="<?= $value->user_id ?>">abcdclhehclecece222 <a class="text_load_more">Read more</a></p> <p class="text_content_rating_full display_none">yxhcgjjechgekjcehk22 <a class="text_hide">Hide</a></p> </div>