Question

如果您选中了“放大”复选框，我会在您将鼠标悬停在文本上时编写一些代码来放大文字。它可以打开放大镜，但是一旦取消选中该复选框，我就无法弄清楚如何将其关闭。

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;
}

Answer 1

您需要侦听点击事件。更改事件将触发值更改。在你的情况下值永远不会改变

$(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);
            });
        }
    });
});

你在这里所做的只是在检查时将新的事件监听器附加到$（＆＃39; a＆＃39;）元素。但你永远不会删除那个听众。所以一旦你点击它就在那里，永远在那里。

试试这个

$(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);
    });
});

所以基本上在你的悬停监听器上，你检查是否选中了复选框元素。并放大那种情况。如果未选中按钮，则不会进行任何更改。如果它被检查并且你将鼠标移出，那么它将恢复原状。

Codepen for working example

Answer 2

您可以通过简单地定义“放大”类来简化此代码，然后根据需要应用或删除它。只需设置CSS transition属性，即可删除animate来电。

然后，您需要为mouseover元素设置a事件处理程序，具体取决于是否选中该复选框。

$(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

HTML复选框打开JavaScript / Jquery中的文本放大功能，但无法将其关闭

2 个答案: