이미지 버튼을 일반 이미지로 바꾸는 방법

Question

function insertQuestion(form) { 

var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ; 

    if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) { 

    $('#mainPlusbutton').html(x); // no need to create a jQuery object 

} 

//append rows into a table code, not needed for this question 

} 

<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post"> 

<table id="question"> 

<tr> 
<td colspan="2"> 
<a onclick="return plusbutton();"> 
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/> 
</a> 
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span> 
</td> 
</tr> 
</table> 

<table id="questionBtn" align="center"> 
<tr> 
<th> 
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /> 
</th> 
</tr> 
</table> 

</form> 

위의 코드에서 일어나는 현상은 사용자가 "질문 추가"버튼을 클릭하면 질문 번호가 테이블에 추가된다는 것입니다. 이제는 if 문이 jquery 함수에서 충족되면 더하기 버튼 이미지 Images/plussign.jpg을 Images/plussigndisabled.jpg으로 대체한다고 가정합니다. 하지만 그렇게하지는 않습니다.

제 질문은 이미지 버튼을 다른 이미지 버튼으로 대체하는 가장 좋은 방법은 무엇입니까? 또한 문서 준비 기능에서 나는 Images/plussign.jpg 버튼을 다시 표시해야합니다.

Answer 1

는 replaceWith() 방법을 사용할 수

$('#mainPlusbutton').replaceWith(x); 

API 참조 : http://api.jquery.com/replaceWith/

난 당신이 정말로 유일한 버튼의 src을 교체 할 생각 동시에 비활성화 할 수 있습니다. attr() 및 prop() 방법으로 수행 할 수 있습니다.

var newImage='Images/plussigndisabled.jpg'; 

$('#mainPlusbutton').attr('src',newImage).prop('disabled',true); 

ID의 한 페이지에서 고유해야합니다 알고, 그래서 당신이 행을 복제하는 경우 당신은 당신이 $ _SESSION에 저장하는 일 해당 요소

Answer 2

그 코드는 나에게 짧은 두통을주었습니다.

귀하의 코드

$('#mainPlusbutton').html(x); 

는 이미지 태그를 말합니다. html의 호출은 을 태그의 안에 바꿔야하지만 이미지 태그에는 아무 것도 포함 할 수 없으므로 바꿀 내용이 없습니다.

Answer 3

이 이미지 태그를 묶기 위해 span 또는 div를 사용하는 것이 좋습니다.

<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/> 

이 스크립트를 변경하십시오. 새로운 HTML을 전체 버튼을 대체 할 경우

$('#mainPlusbutton').parent().html(x);