HTML複選框打開JavaScript/Jquery中的文本放大功能，但無法關閉它

如果您選擇了Magnify複選框，我正在編寫一些代碼以將文本懸停在其上方以放大文本。它可以打開放大鏡，但我不知道如何取消選中複選框後將其關閉。HTML複選框打開JavaScript/Jquery中的文本放大功能，但無法關閉它

textmagn.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Text Magnification</title> 
     <link rel="stylesheet" type="text/css" href="lines.css"> 
    </head> 
    <body> 
     <ul> 
     <p> 
      <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
      <script src="javasc.js"></script> 
      <a>This is a sentece.</a> 
      <a>A very long sentence.</a> 
      <a>Magnify this sentence.</a> 
     </p> 
     </ul> 
     <input type="checkbox" name="check"> 
     Magnify 
    </body> 
</html>

javasc.sc

$(document).ready(function() { 
    $('input[type="checkbox"][name="check"]').change(function() { 
     if(this.checked) { 
      $('a').hover(function(){ 
       $(this).animate({'z-index':'1','font-size':'30px'},50); 
      }, 
      function(){ 
      $(this).animate({'z-index':'0','font-size':'15px'},50); 
      }); 
     } 
    }); 
});

lines.css

a { 
    text-decoration:none; 
    font-size: 15px; 
} 
ul { 
    list-style-type:none; 
} 
li { 
    display: inline; 
    padding-left: 50px; 
}

來源

2017-08-11 R. Mo

你要聽Ç舔事件。更改事件將觸發值更改。你的情況值永遠不會改變

$(document).ready(function() { 
    $('input[type="checkbox"][name="check"]').click(function() { 
     if(this.checked) { 
      $('a').hover(function(){ 
       $(this).animate({'z-index':'1','font-size':'30px'},50); 
      }, 
      function(){ 
      $(this).animate({'z-index':'0','font-size':'15px'},50); 
      }); 
     } 
    }); 
});

，你在這裏做什麼也只是連接新的事件監聽器$（「A」）元素，當它被選中。但你永遠不會刪除那個聽衆。所以一旦你點擊它在那裏，並始終在那裏。

試試這個

$(document).ready(function() { 
    $('a').hover(function() { 
     if(input[type="checkbox"][name="check"].checked) { 
      $(this).animate({'z-index':'1','font-size':'30px'},50); 
     }else { 
      $(this).animate({'z-index':'0','font-size':'15px'},50); 
     }; 
    }); 
});

**更新**

$(document).ready(function() { 
    $('a').hover(function() { 
     if($('input[type="checkbox"][name="check"]').is(':checked')) { 
      $(this).animate({'z-index':'1','font-size':'30px'},50); 
     }; 
    }, function() { 
      $(this).animate({'z-index':'0','font-size':'15px'},50); 
    }); 
});

所以基本上你的懸停監聽器，你是否認爲checkbox元素被選中。並放大該情況。如果按鈕沒有被選中，它不會做任何改變。如果它被選中，並且你將鼠標移出，則它將恢復。

Codepen for working example

來源

2017-08-11 16:52:42

這是使用jQuery和JavaScript我的第一次。你能澄清嗎？我不知道要改變什麼。 –

它現在不放大現在 –

好吧，明白了。看到我的更新。 –

您可以通過簡單地定義一個「放大的」類簡化這一代碼相當多，然後就申請，或根據需要進行刪除。只需設置一個CSS transition屬性，就可以刪除animate調用。

然後，您需要爲a元素設置mouseover事件處理程序，具體取決於是否選中該複選框。

$(document).ready(function() { 
 
    var chk = document.getElementById("check"); 
 
    var anchors = $('a'); 
 
    
 
    chk.addEventListener("click", function(){ 
 
    if(chk.checked) { 
 
     anchors.on("mouseover", mag); 
 
    } else { 
 
     anchors.off("mouseover"); 
 
     anchors.removeClass("magnified"); 
 
    } 
 

 
    function mag(evt){ 
 
     $(evt.target).addClass("magnified"); 
 
    } 
 
    
 
    }); 
 
    
 
});

a { 
 
    text-decoration:none; 
 
    font-size: 15px; 
 
    transition:1s all; 
 
} 
 

 
.magnified { 
 
    font-size:30px; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
} 
 
li { 
 
    display: inline; 
 
    padding-left: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<p> 
 
    <a>This is a sentece.</a> 
 
    <a>A very long sentence.</a> 
 
    <a>Magnify this sentence.</a> 
 
</p> 
 
</ul> 
 

 
<input type="checkbox" name="check" id="check"> 
 
Magnify

來源

2017-08-11 17:01:54

HTML複選框打開JavaScript/Jquery中的文本放大功能，但無法關閉它

回答

相關問題