नया कोट प्राप्त करने के लिए क्लिक करने पर, बटन सहित, सभी पृष्ठ के लिए रंग बदल जाते हैं। हालांकि, यदि उपयोगकर्ता माउस को बटन पर रखता है (उसे मँडराता है), तो रंग नहीं बदलेगा। पूरे डिजाइन को खराब कर रहा है।

क्या आप जानते हैं कि मैं इसे कैसे ठीक कर सकता हूं?

$("#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>
2
Nicolas Hochard 3 अप्रैल 2018, 16:22

5 जवाब

सबसे बढ़िया उत्तर

होवर प्रभाव क्लिक करने के बाद टूटा हुआ प्रतीत होता है इसका कारण यह है कि माउसओवर घटना को सक्रिय नहीं किया गया है। एक शुद्ध दृष्टिकोण से, इस व्यवहार को कुछ सीएसएस का उपयोग करके आसानी से नियंत्रित किया जा सकता है: आपको केवल एक कस्टम <style> तत्व बनाने की ज़रूरत है, जिसकी टेक्स्ट सामग्री प्रत्येक रंग परिवर्तन के लिए लगातार अपडेट हो रही है। मूल रूप से आप जो चाहते हैं वह है:

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

अपनी फ़ाइल के शीर्ष पर, आप एक निश्चित आईडी के साथ एक कस्टम <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));

काम करते हुए कोडपेन देखें: https://codepen.io/terrymun/pen/oqMjXB

आपके कोड के साथ अभी भी कुछ समस्याएं हैं, खासकर जब प्रत्येक .click() के लिए नई .hover() बाइंडिंग बनाने की बात आती है। यह आदर्श नहीं है क्योंकि हर बार जब उपयोगकर्ता आपके उद्धरणों के माध्यम से साइकिल चलाता है, तो नई बाइंडिंग बनाई जाती है। इससे आपका ऐप बहुत जल्दी डाउन हो जाएगा।

1
Terry 3 अप्रैल 2018, 13:47

यदि माउस बटन को मँडरा रहा है तो आपको किसी तरह ट्रैक करना होगा और यह सुनिश्चित करने के लिए कि यदि ऐसा है, तो आप उस घटना को ट्रिगर करने के लिए mouseleave और mouseenter पर कॉल करें, जो आप यहां गायब हैं। एक समाधान है:

$("#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);
  });
});
0
Lajos Arpad 3 अप्रैल 2018, 13:49

अपने कोड में अंतिम दो पंक्ति जोड़ने का प्रयास करें ...

$(".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").css({ background: color[col], "border-radius": "4px" });
$(".quote").css("color", "white");
0
Dilip Solanki 3 अप्रैल 2018, 13:35

आपको बस mouseleave क्लिक $(this).trigger('mouseleave'); यहां पर ट्रिगर करना है। काम कर रहे कोडपेन। ईवेंट को कॉल/ट्रिगर करने के लिए भी फ़ंक्शन परिभाषा को शीर्ष पर ले जाया जाना चाहिए।

1
Saravanan I 3 अप्रैल 2018, 13:55

click पर... आप होवर हैंडलर को फिर से परिभाषित करते हैं।

तो अगर mouseleave अभी तक नहीं हुआ... रंग नहीं बदलता है।

लेकिन आप click हैंडलर की शुरुआत में एक mouseleave को बाध्य कर सकते हैं... और चूंकि हम जानते हैं कि माउस को बटन के ऊपर होना चाहिए, इसलिए अंत में एक mouseenter को भी बाध्य करें। click हैंडलर का (hover को फिर से परिभाषित किए जाने के बाद)।

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

   //... you whole code is unchanged

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

यह रहा आपका CodePen अपडेट किया गया

1
Louys Patrice Bessette 3 अप्रैल 2018, 13:51