홈>2020-03-18 14:59

javascript - 부모 DIV에서 클래스별로 DIV 찾기

부모 컨테이너 아래에 여러 DIV 요소가 중첩되어 있습니다. 사용자가이 cp-anchor 중 하나를 클릭하면 , 다른 cp-content 에서 CSS를 수정하고 싶습니다. . Stack Overflow에서 발견 된 수십 가지 방법을 시도했지만 어떤 이유로 든 예상대로 작동하지 않는 것 같습니다. 누구든지 올바른 방향으로 나를 도울 수 있습니까?

내가 사용하고있는 예의 JSFiddle 입니다.

   <script type="text/javascript">
    $( document ).ready(function()
    {
        $('.cp-anchor').click(function(e)
        {
            e.preventDefault();
            $(this).parent().find('cp-content').css('max-height','none');
            $(this).remove();
        });
    });
    </script>
<div class="cp-container">
    <div class="cp-content">
        <table id="tablepress-4">
        </table>
    </div>
    <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

javascriptjqueryhtmlcss

답변 # 1

와이즈 비즈가 필요해 수업 선택을 의미합니다.

//                     v
$(this).parent().find('.cp-content').css('max-height','none');

$(document).ready(function() {
  $('.cp-anchor').click(function(e) {
    e.preventDefault();
    $(this).parent().find('.cp-content').css('max-height', 'none');
    $(this).remove();
  });
});

.cp-content {
  max-height: 0;
  overflow: hidden;
}

<시간>

바닐라 JS 버전입니다 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
  <div class="cp-content">
    CP CONTENT
  </div>
  <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll('.cp-anchor')
          .forEach(el => el.addEventListener("click", showContent));
  function showContent(e) {
    e.preventDefault();
    this.parentNode.querySelector('.cp-content').style.maxHeight = 'none';
    this.remove();
  }
});

.cp-content {
  max-height: 0;
  overflow: hidden;
}

답변 # 2

Js에서는 다음 코드 한 줄을 사용합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
  <div class="cp-content">
    CP CONTENT
  </div>
  <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

$(this).parent().find('.cp-content').css('max-height','none');

Python2.net

javascript - 부모 DIV에서 클래스별로 DIV 찾기

관련 자료