点击

时间:2018-04-03 13:22:40

标签: javascript jquery html css

点击获取新报价时,所有页面的颜色都会发生变化,包括按钮。但是,如果用户将鼠标放在按钮上(将鼠标悬停在按钮上),则颜色不会发生变化。弄乱了整个设计。

你知道我怎么解决这个问题吗?



$("#getQuote").html(function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

$("#getQuote").on("click", function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

// Twitter share button
$("#tweetIt").on("click", function() {
  var quote = document.getElementById("result").innerText;
  var author = document.getElementById("title").innerText;
  var tweetUrl =
    "https://twitter.com/share?text=" +
    encodeURIComponent(quote + " " + author + " #quote") +
    "&url=" +
    "www.qod.com/";

  window.open(tweetUrl);
});

$(document).ready(function() {
  $("#getQuote").click(function() {
    var col = Math.floor(Math.random() * 12);

    var color = [
      "#16a085",
      "#27ae60",
      "#2c3e50",
      "#f39c12",
      "#e74c3c",
      "#9b59b6",
      "#FB6964",
      "#342224",
      "#472E32",
      "#BDBB99",
      "#77B1A9",
      "#73A857"
    ];

    $(".twitter, #tweetIt")
      .css({
        background: color[col],
        "border-radius": "3px"
      })
      .addClass("animated fadeIn 8000");
    $("i, span, p, .quote")
      .css("color", color[col])
      .addClass("animated fadeIn");

    $(".quote").hover(
      function() {
        $(this).css({
          background: color[col],
          "border-radius": "4px"
        });
        $(this).css("color", "white");
      },
      function() {
        $(this).css("background-color", "white");
        $(this).css("color", color[col]);
      }
    );

    $("#tweetIt").hover(
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1.1,1.1)");
      },
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1,1)");
      }
    );

    setTimeout(function() {
      $("i, span, p, background").removeClass("animated fadeIn");
    }, 500);
  });
});

.container {
  margin-top: 200px;
}

.row {
  height: auto;
}

.test4 {
  position: relative;
  bottom: 10;
  right: 0;
}

.iconLeft {
  float: right;
  right: 16px;
  font-size: 5em;
  color: #555555;
}

.iconRight {
  float: bottom right;
  right: 16px;
  font-size: 5em;
  color: #555555;
}

.cont {
  font-size: 2em;
  color: #555555;
}

.title {
  text-align: right;
  font-size: 1.3em;
  margin-top: 1em;
  color: #555555;
}

.main {
  display: flex;
  justify-content: center;
}

.quote {
  width: 300px;
  border-radius: 3px;
  margin-top: 20px;
  font-size: 20px;
  padding: px;
  height: 60px;
  line-height: 0px;
  background: white;
  color: #555555;
  margin-bottom: 300px;
  border: solid 2px;
}

.quote:hover {
  background: #555555;
  color: white;
  border-radius: 4px;
}

.twitter {
  float: left;
  color: white;
}

.twitter:hover {
  transform: scale(1.1, 1.1);
  color: white;
}

button {
  background-color: #555555;
  font-size: 3em;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='row'>
    <div class='col-sm-2 test2'>
      <i class="fa fa-quote-left iconLeft"> </i>
    </div>
    <div class='col-sm-8 test3'>

      <span class="cont" id="result" onclick="myFunction()"></span>

      <p class="title" id="title"></p>

      <div class="twitter">
        <button id="tweetIt" class="btn fab fa-twitter" title="Tweet this quote!"> Tweet</button>
      </div>

    </div>
    <div class='col-sm-2 test4'>
      <i class="fa fa-quote-right iconRight"> </i>
    </div>
  </div>

</div>

<div class="row container-fluid main">
  <button id="getQuote" class="quote btn btn-outline-secondary">New Quote</button>
</div>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

点击后悬停效果似乎被破坏的原因是因为未触发鼠标悬停事件。从纯粹主义的角度来看,可以使用一些CSS轻松处理此行为:您需要做的就是创建一个自定义<style>元素,其文本内容会针对每个颜色更改不断更新。基本上你想要的是:

.quote {
  background-color: #fff;
  color: <<customColor>>;
}
.quote:hover {
  background-color: <<customColor>>;
  color: #fff;
}

在文件顶部,您可以创建具有特定ID的自定义<style>元素,以便日后轻松选择。我们暂时把它留空:

var style = document.createElement("style");
style.id = 'customQuoteHover';
document.getElementsByTagName("head")[0].appendChild(style);

您只需使用正确的规则覆盖自定义.hover()元素的文本内容,而不是绑定<style>事件:

var css = ".quote { background-color: #fff; color: "+color[col]+"; } .quote:hover { background-color: "+color[col]+"; color: #fff; }";
var styleElent = document.getElementById('customQuoteHover');
while (styleElent.hasChildNodes()) {
  styleElent.removeChild(styleElent.lastChild);
}
styleElent.appendChild(document.createTextNode(css));

请参阅CodePen:https://codepen.io/terrymun/pen/oqMjXB

您的代码仍然存在一些问题,尤其是在为每个.hover()创建新的.click()绑定时。这并不理想,因为每次用户循环显示引号时,都会创建新的绑定。这会让你的应用很快陷入困境。

答案 1 :(得分:1)

您只需在点击mouseleave here上触发$(this).trigger('mouseleave');即可使用。此外,函数定义应移至顶部以调用/触发事件。

答案 2 :(得分:1)

click上...您重新定义了悬停处理程序。

因此,如果mouseleave尚未发生......颜色不会改变。

但你可以在mouseleave处理程序的最开始强制click ...因为我们知道鼠标应该在按钮上方,所以也强制mouseenterclick处理程序的末尾(在重新定义hover之后)。

$("#getQuote").click(function() {
   $(this).trigger("mouseleave");          // Force mouseleave

   //... you whole code is unchanged

   $(this).trigger("mouseenter");          // Force mouseenter
});

这是您的CodePen updated

答案 3 :(得分:0)

在代码中尝试最后两行添加...

df = df.ge(10).mul(100)

答案 4 :(得分:0)

如果鼠标悬停在按钮上,您需要以某种方式进行跟踪,并确保如果是,请拨打mouseleavemouseenter来触发此处缺少的事件。解决方案是:

$("#getQuote").html(function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

$("#getQuote").on("click", function() {
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(val) {
      var ran = Math.floor(Math.random() * 80);

      $(".cont").html(val[ran].quote);
      $(".title").html("- " + val[ran].author);
    }
  );
});

// Twitter share button
$("#tweetIt").on("click", function() {
  var quote = document.getElementById("result").innerText;
  var author = document.getElementById("title").innerText;
  var tweetUrl =
    "https://twitter.com/share?text=" +
    encodeURIComponent(quote + " " + author + " #quote") +
    "&url=" +
    "www.qod.com/";

  window.open(tweetUrl);
});

var isInside = false;
$(document).ready(function() {
  $("#getQuote").mouseenter(function() {
        isInside = true;
  });
  $("#getQuote").mouseleave(function() {
        isInside = false;
  });
  $("#getQuote").click(function() {
    var col = Math.floor(Math.random() * 12);

    var color = [
      "#16a085",
      "#27ae60",
      "#2c3e50",
      "#f39c12",
      "#e74c3c",
      "#9b59b6",
      "#FB6964",
      "#342224",
      "#472E32",
      "#BDBB99",
      "#77B1A9",
      "#73A857"
    ];

    $(".twitter, #tweetIt")
      .css({ background: color[col], "border-radius": "3px" })
      .addClass("animated fadeIn 8000");
    $("i, span, p, .quote")
      .css("color", color[col])
      .addClass("animated fadeIn");

    $(".quote").hover(
      function() {
        $(this).css({ background: color[col], "border-radius": "4px" });
        $(this).css("color", "white");
      },
      function() {
        $(this).css("background-color", "white");
        $(this).css("color", color[col]);
      }
    );

    $("#tweetIt").hover(
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1.1,1.1)");
      },
      function() {
        $(this).css("color", "white");
        $(this).css("transform", "scale(1,1)");
      }
    );

    setTimeout(() => {
      $("i, span, p, background").removeClass("animated fadeIn");
      if (isInside) {
        $(this).mouseleave().mouseenter();
      }
    }, 500);
  });
});