글꼴 변경 굉장 아이콘을 클릭하십시오.

글꼴을 멋지게 변경하려면 아이콘을 클릭하면 변경됩니다. 다른 질문 (예 : this one 및 this one 및 this one)을 읽었지만 작동 예제를 얻지 못했습니다.글꼴 변경 굉장 아이콘을 클릭하십시오.

이 경우 페이스 북 아이콘을 틱으로 변경하려고합니다.

는

는 HTML :

<html> 
    <head> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="./java.js"></script> 
    </head> 
    <body> 
    <div> 
     <a href="javascript:void" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a> 
     <a id="facebookicon" href="javascript:void" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a> 
    </div> 
    </body> 
</html>

자바 스크립트 : 나는이 자바 스크립트 코드 시도

$('#facebookicon').click(function(){ 
    $(this).find('i').toggleClass('fa-facebook-square fa-check-square') 
});

: 나는 아이콘을 클릭하면

$('body').on('click', '#facebookicon', function(){ 
    $('i').toggleClass('fa-facebook-square fa-check-square'); 
});

이 난에 구문 오류 콘솔 :

SyntaxError: expected expression, got end of script

나는 이것이 javascript:void과 관련이 있다고 생각하지만 확실하지 않습니다. 이 문제를 해결하려 할 때 답은 모두 잘못된 위치에 따옴표가 있거나 이중 및 작은 따옴표를 섞어서 일치시키는 사람들 인 것처럼 보입니다. 나는 그것이 여기의 경우라고 생각하지 않는다.

토글 효과가있는 것을 목표로하는 많은 사람들이 있지만 궁극적으로 한 번 변경되고 다시 클릭하면 다시 변경되지 않도록하고 싶습니다.

누군가 나를 올바른 방향으로 안내 할 수 있습니까?

출처

2017-04-13 G_T

피들을 제공 할 수 있습니까? –

'javascript :;'또는'javascript : void (0)'을 시도 했습니까? – Manoj

@Jai and @Manoz'javascript : void (0)'를 사용하면 구문 오류를 해결할 수 있지만 코드를 복사하여 붙여 넣을 때 Firefox 50.1에서 아이콘이 로컬로 변경되지 않습니다. @ Jai 대답은 여기에있는 것처럼 보이지만 로컬로 재생할 수 없으며 심지어 두 번 클릭하면 다시 바뀝니다. –

당신은 앵커의 href 속성에 javascript:void(0)를 사용해야하고 내가 코멘트에서 언급 한 바와 같이 앵커 요소를 동적으로 생성되지 않은 경우 당신은 당신의 첫 조각을 사용할 수 있습니다

$('#facebookicon').click(function() { 
 
    $(this).find('i').toggleClass('fa-facebook-square fa-check-square') 
 
});

a {color: magenta;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="javascript:void(0)" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a> 
 
    <a id="facebookicon" href="javascript:void(0)" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a> 
 
</div>

출처

2017-04-13 05:06:16 Jai

위의 내 댓글보기 –

@G_T 이상하지만 여기에 무슨 일이 일어나고 있는지 말하기는 쉽지 않습니다. 콘솔에서 오류가 발생하지 않는 것을 확인할 수 있습니까? – Jai

답변의 div 태그에있는 코드를 내 질문의 HTML 본문에 복사하면 콘솔에 오류가없는 것을 확인할 수 있습니다. –

javascript:void(0) 또는 여기

javascript:;에 javascript:void

변경하는 예이다 012,395

출처

2017-04-13 05:06:25 Manoj

위의 내 댓글보기 –

글꼴 변경 굉장 아이콘을 클릭하십시오.

답변

관련 문제