Question

127

Jquery click event on div

rated 0 times [ 131] [ 4] / answers: 1 / hits: 35340 / 13 Years ago, mon, february 13, 2012, 12:00:00

I have this code:

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>

<style type=text/css>

.kat1 {

    background-image:url(ikoniceKategorije/07.jpg);

    width:30px;

    height:30px;

    float:left;

    }

.kat1:hover {

    background-image:url(ikoniceKategorije/07h.jpg);

    }



// here I have a code for .kat2,kat2 ... styles

#div {

    width:220px;

    height:30px;

    overflow:hidden;

    }



</style>

<script>

$(function() {

  $('#div div').click(function() {

    var elem = $(this);

    var style = elem.css('background-image');

    if(/h.jpg/.test(style)) {

      elem.css('background-image', style.replace(/h.jpg/, '.jpg'));

    } else {

      elem.css('background-image', style.replace(/.jpg/, 'h.jpg'));

    }

  });

});

</script>

</head>



<body>



    <div id=div>

        <div class=kat1 changing></div> 

        <div class=kat2 changing></div>

        <div class=kat3 changing></div>

        <div class=kat4 changing></div>

        <div class=kat5 changing></div>

        <div class=kat6 changing></div>

        <div class=kat7 changing></div>

    </div>

</body>

</html>

I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...

demo www.pluspon.com/kategorije.html

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 How to format date in v-Calendar?

Tue, Jul 28, 20, 00:00, 4 Years ago

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 13 Years ago daveon · Accepted Answer

Why do you want to have this functionality in JavaScript? An other option would be to use CSS classes to simplify the process:

$(function() {

  $('#div div').click(function() {

    $(this).toggleClass('active');

  });

});

CSS:

.kat1 {

    background-image:url(ikoniceKategorije/07.jpg);

    width:30px;

    height:30px;

    float:left;

}

.kat1:hover,

.kat1.active {

    background-image:url(ikoniceKategorije/07h.jpg);

}