मैं एक यादृच्छिक विजेता पॉपअप प्राप्त करने का प्रयास कर रहा हूं। मैं उस बिंदु पर पहुंच गया हूं जहां पृष्ठ लोड होने पर, 3 divs आईडी में से एक को विजेता द्वारा बदल दिया जाता है।

मुद्दा यह है कि आईडी विजेता के साथ div पर क्लिक करते समय, यह इसके साथ जुड़े jQuery को ट्रिगर नहीं करता है।

क्या इस समस्या को ठीक करने के लिए मैं कुछ बदल सकता हूं?

मैं जिस कोड का उपयोग कर रहा हूं उसका एक नमूना नीचे शामिल है।

    <script>
        $(document).ready(function(){
            $("#left").click(function(){
                $("#limg").attr('src', 'https://via.placeholder.com/175');
            });

            $("#center").click(function(){
                $("#cimg").attr('src', 'https://via.placeholder.com/175');
            });

            $("#right").click(function(){
                $("#rimg").attr('src', 'https://via.placeholder.com/175');
            });

            $("#winner").click(function(){
                $("#wimg").attr('src', 'https://via.placeholder.com/190');
                $("#winbox").css('display','block');
                $("#winbox").css('z-index','2');
            });
        });
    </script>
<style>
    #winbox {display:none; background-color:red; color:white; padding:20px;}
</style>
<body>
    <div id="winbox">WINNER</div>
    <div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
    <div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
    <div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>

        <script>
        window.onload = function() {
            var selector = Math.floor(Math.random() * 3) + 1;
            if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
            else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
            else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
        }
        </script>
</body>
1
truman.wang 20 जिंदा 2020, 02:47

1 उत्तर

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

ले जाया गया

$("#winner").click(function() { $("#wimg").attr('src', 'https://via.placeholder.com/190'); $("#winbox").css('display', 'block'); $("#winbox").css('z-index', '2');

पृष्ठ लोड के बजाय यादृच्छिक div चयन के बाद चलाने के लिए।

  $(document).ready(function() {
    $("#left").click(function() {
      $("#limg").attr('src', 'https://via.placeholder.com/175');
    });

    $("#center").click(function() {
      $("#cimg").attr('src', 'https://via.placeholder.com/175');
    });

    $("#right").click(function() {
      $("#rimg").attr('src', 'https://via.placeholder.com/175');
    });
    
  });
#winbox {
  display: none;
  background-color: red;
  color: white;
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="winbox">WINNER</div>
  <div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
  <div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
  <div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>

  <script>
    window.onload = function() {
      var selector = Math.floor(Math.random() * 3) + 1;
      console.log(selector)
      if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
      else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
      else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
      $("#winner").click(function() {
      $("#wimg").attr('src', 'https://via.placeholder.com/190');
      $("#winbox").css('display', 'block');
      $("#winbox").css('z-index', '2');
    });
    }
  </script>
</body>
2
Mohamed Farouk 20 जिंदा 2020, 00:07