Попытка применить событие к одному классу JQuery или js

-4

Я пытаюсь создать свою собственную функцию More/less для комментариев. ReadMore ReadLess Image.Попытка применить событие к одному классу JQuery или js

Во время разработки этого вопроса я столкнулся с проблемой. Предположим, у меня есть 3 комментария (см. Первое изображение) с более чем 500 символами. В этих комментариях все/полный текст не отображается, поэтому я добавляю ReadMore Ссылки, чтобы прочитать весь комментарий. Показать только тот класс, где я нажал ..

Проблема: когда я нажимаю на одну из этих ссылок ReadMore ее показывает мне все три комментария с полным текстом Вместо того, чтобы показать мне только щелкнув текст класса. Проблема Изображение: img.ctrlv.in/img/16/03/12/56e4110ccb82d.png

Мой jsBin: https://jsbin.com/waqoror/1/edit?html,js,console,output

Вставить мой Snippet также здесь Теперь

function mangeText(text) { 
 
    var minCharLength = 50; 
 
    var readL ="Read Less"; 
 
    var readM = "Read More"; 
 
    var txt = text, 
 
    txtLength = 0, 
 
    totLength = ""; 
 
    var startDisplayText = "", 
 
    startupCont = "", 
 
    hiddenContent = ""; 
 
    txtLength = txt.length; 
 
    for (var i = 0; i < minCharLength; i++) { 
 
    totLength += txt[i]; 
 
    //console.log("["+i+"] "+totLength); 
 
    } 
 
    if (txt.length >= (minCharLength + 50)) { 
 
    startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength + 
 
     " <span>" + 
 
     "<a href='#' onclick='ReadMoreLess()' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " + 
 
     readM + 
 
     "</a>" + 
 
     "</span>" + 
 
     "</span>"; 
 

 
    hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt + 
 
     " <span>" + 
 
     "<a href='#' onclick='ReadMoreLess()' class='txb_rdL _pedu'> " + 
 
     readL + 
 
     " </a>" + 
 
     "</span>" + 
 
     "</span>"; 
 
    txt = startupCont; 
 
    txt += hiddenContent; 
 
    } 
 
    return txt; 
 
} 
 

 
function ReadMoreLess(){ 
 
\t \t \t 
 
\t \t \t if($(".tetb_apndhd").css("display") == "none"){ 
 
\t \t \t \t console.log("IF"); 
 
\t \t \t \t $(".tetb_apndhd").css({"display":"inline-block"}); 
 
\t \t \t \t $(".tetb_apndShw").css({"display":"none"}); 
 
\t \t \t }else if(($(".tetb_apndhd").css("display") == "inline-block")){ 
 
\t \t \t \t console.log("ELSE IF"); 
 
\t \t \t \t $(".tetb_apndShw").css({"display":"inline-block"}); 
 
\t \t \t \t $(".tetb_apndhd").css({"display":"none"}); 
 
\t \t \t } 
 
\t \t } 
 

 
$(".apndbtn").click(function(){ 
 
\t var txt = mangeText($(".txt").val()); 
 
\t $(".dclr").append(txt); 
 
});

.txt{width:300px;height:150px;resize:none}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<textarea class="txt" id="tt">Etiam vitae faucibus urna. Cras in enim ac eros cursus euismod. Aenean tristique arcu eu quam pharetra rutrum. Proin tincidunt magna at nibh tristique, eu finibus ipsum ultricies. Nunc eget lorem ac diam dictum condimentum. Vestibulum eu nisi a lorem ornare finibus.</textarea><br/> 
 
<button class="apndbtn">Append</button> 
 
<div class="dclr"></div> 
 
</body> 
 
</html>

источник

2016-03-12 hijckBoy

Привет, это Idio t, см. [mcve] и укажите код в своем вопросе. –

Мои раствор:

function mangeText(text) { 
    var minCharLength = 50; 
    var readL ="Read Less"; 
    var readM = "Read More"; 
    var txt = text, 
    txtLength = 0, 
    totLength = ""; 
    var startDisplayText = "", 
    startupCont = "", 
    hiddenContent = ""; 
    txtLength = txt.length; 
    for (var i = 0; i < minCharLength; i++) { 
    totLength += txt[i]; 
    //console.log("["+i+"] "+totLength); 
    } 
    if (txt.length >= (minCharLength + 50)) { 
    startupCont += "<span class='yughi501 _po2075 tetb_apndShw umoriRut' style='display:inline-block'> " + totLength + 
     " <span>" + 
     "<a href='#' class='txb_rdM _d1e301 _oijd51 _pedu' style='display:inline-block'> " + 
     readM + 
     "</a>" + 
     "</span>" + 
     "</span>"; 



    hiddenContent = "<span class='yughi411 _po21075 _umori120Rut tetb_apndhd' style='display:none'> " + txt + 
     " <span>" + 
     "<a href='#' class='txb_rdL _pedu'> " + 
     readL + 
     " </a>" + 
     "</span>" + 
     "</span>"; 
    txt = startupCont; 
    txt += hiddenContent; 


    } 
    return txt; 
} 

function ReadMoreLess(event){ 
    //alert(event.target); 

} 


$(".apndbtn").click(function(){ 
    var txt = mangeText($(".txt").val()); 
    $(".dclr").append(txt); 
     $(".txb_rdM").bind("click", function() { 
     $(this).parents(".umoriRut").hide().next().show(); 
     return; 
    }); 
    $(".txb_rdL").bind("click", function() { 
     $(this).parents("._umori120Rut").hide().prev().show(); 
    }); 

});

Я удалил событие onClick по ссылкам и добавлю этот код в .apndb tn click function:

$(".txb_rdM").bind("click", function() { 
      $(this).parents(".umoriRut").hide().next().show(); 
      return; 
     }); 
     $(".txb_rdL").bind("click", function() { 
      $(this).parents("._umori120Rut").hide().prev().show(); 
     });

источник

2016-03-12 15:29:13 bugyt

ty sir. это работает – hijckBoy

Добро пожаловать. – bugyt

Почему вы используете 'return'? . '$ (это) .parents (" umoriRut") скрыть() следующий() шоу()..; возвращение; '- < – hijckBoy

Попытка применить событие к одному классу JQuery или js

ответ

Смежные вопросы