javascript - Hide Image when another image is clicked

Question

Welcome To Ask or Share your Answers For Others

javascript - Hide Image when another image is clicked

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

javascript - Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?

I want to click an image, and on that click, hide another image right next to it.

 <script type="text/javascript"> 

 
        $("#butShowMeSomeUnits").click(function() { 
            $('#arrowUnitspic').hide();
        });
 
      
 </script>

Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...

Thanks

EDIT

I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?

<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#butShowMeSomeUnits").click(function () {
                $('#arrowUnitspic').hide();
            });
        });

</script>
</head>

<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>

EDIT JS Fiddle

If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:23:23+0000

You need to do do on page ready:

<script type="text/javascript"> 
$(document).ready(function() {
       $("#butShowMeSomeUnits").click(function() { 
            $('#arrowUnitspic').hide();
        });
});
</script>

Edit: The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?

If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:

if (typeof jQuery != 'undefined') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}

In addition it might be helpful to see what errors your browser console /dev tools is showing.

Categories

javascript - Hide Image when another image is clicked

javascript - Hide Image when another image is clicked

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags