javascript — показать больше с циклом php и jquery

Question

javascript — показать больше с циклом php и jquery

Я зацикливаю около сорока строк, используя php. Я сейчас пользуюсь substr() отображать только первые 170 символов. Я использую jQuery, чтобы скрыть остальную часть строки и создать ссылку, чтобы показать остальные. Это код, который я зацикливаю:

echo "<span>" . $substring_1 . "</span><span class='dotdot'>...</span><span class='readmore'>" . $substring_2 . "</span><a href='#' class='clickmore'>Show more</a>";

Вот jQuery:

$(document).ready(function() {
$(".readmore").hide();
$(".clickmore").click(function() {
$(".dotdot").hide();
$(".readmore").show();
});
});

Этот код работает, однако, я хотел бы, чтобы это только «показать больше» для отдельной строки. Прямо сейчас, потому что я использую селектор класса, когда я нажимаю «показать больше», он «показывает больше» для каждого экземпляра в цикле.

Есть ли способ «показать больше» только для экземпляра цикла, на который я нажимаю?

0

javascript jquery loops php show-hide

Решение

По вопросам рекламы [email protected]

Accepted Answer

вам нужно использовать $(this) а также prev()

$(document).ready(function() {
$(".readmore").hide();
$(".clickmore").click(function() {
$(this).prev().prev(".dotdot").hide();      //<<<<<<<<<<<<<<<
$(this).prev(".readmore").show();    //<<<<<<<<<<<<<<<
});
});

$(document).ready(function() {
$(".readmore").hide();
$(".clickmore").click(function() {
$(this).prev().prev(".dotdot").hide();      //<<<<<<<<<<<<<<<
$(this).prev(".readmore").show();    //<<<<<<<<<<<<<<<
$(this).hide();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>

<hr />
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>

<hr />
<span>This is</span><span class='dotdot'>...</span><span class='readmore'> Complete string</span><a href='#' class='clickmore'>Show more</a>

0

Другие решения

Других решений пока нет …

Источник