>

클릭 한 단어를 비활성화하고 비활성화 된 단어를 활성화하는 JavaScript 함수를 작성하고 싶습니다. 초기 상태는 2 개는 활성화되어 있고 1 개는 활성화되지 않은 상태입니다.

<div id="10" style="white-space: pre; color: #ddd">
<a href="#" onclick="edit(10, 'one')">one</a>     
<span>two</span>     
<a href="#" onclick="edit(10, 'three')">three</a>     
</div>

MWE는 다음과 같습니다 :

https://jsfiddle.net/kowalsky/xpvt214o/145934/

수정: 활성 상태에서 클릭 가능, 즉 클릭 이벤트가 있음을 의미합니다. 비활성화는 스팬을 의미합니다. 초기 예와 MWE에서와 같습니다.

자바 스크립트와 js + jquery 버전 모두에 관심이 있습니다.


  • 답변 # 1

    바이올린을 확인했는데 트랙에 문제가 있습니다. 문제는 선택한트랙입니다.  그리고 '  FIRST변형은 그 접근 방식에 대한 해결책이지만 (필요한 경우 특별한 이유가있는 경우) 필요한 경우 이스케이프 처리하는 것이 매우 미묘한 세부 사항에 얽히도록 요구합니다.SECOND는 내가 당신이라면 어떻게 할 것인가입니다.

    처음

    "
    
    
    function edit(id, text) {
    	var div = $('#'+id);
      var span = div.children("span");
      var ahref =  '<a href="#" onclick="edit(' + id + ',\'' + span[0].textContent + '\')">';
     	span.replaceWith(ahref + span[0].textContent + '</a>');
    	var clicked = div.children(":contains(" + text + ")");		
     	clicked.replaceWith("<span>"+text+"</span>");	
    }
    
    

    SECOND(권장)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="10" style="white-space: pre; color: #ddd">
    <a href="#" onclick="edit(10, 'one')">one</a>     
    <span>two</span>     
    <a href="#" onclick="edit(10, 'three')">three</a>     
    </div>
    
    
    $('div').on('click', 'a', function(){
      var anchor = $(this);
      var span = $(this).siblings('span');
      anchor.replaceWith(span.clone().text(anchor.text()));
      span.replaceWith(anchor.clone().text(span.text()));
    });
    
    

  • 답변 # 2

    jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="10" style="white-space: pre; color: #ddd"> <a href="#">one</a> <span>two</span> <a href="#">three</a> </div> 를 사용할 수 있습니다  이것을 달성하는 기능.

    replaceWith
    
    
    function edit(ele) {      
        $(".myClass.deactive").replaceWith(function () {
        return $('<a/>', {
            class: 'myClass',
            html: this.innerHTML,
            href:"#",
            onclick:"edit($(this))"
        });	});
        ele.replaceWith(function () {
        return $('<span/>', {
            class: 'myClass deactive',
            html: this.innerHTML        
        });	});
       
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="10" style="white-space: pre; color: #ddd"> <a href="#" class="myClass" onclick="edit($(this))">one</a> <span class="myClass deactive">two</span> <a href="#" class="myClass" onclick="edit($(this))">three</a> </div>

  • 이전 javascript - onKeyPress의 기능에 매개 변수 추가
  • 다음 haskell - Pragma 종속성을 사용하여 ghci에서 데이터 유형을 올바르게 정의하는 방법은 무엇입니까?