Javascript&Css - onclick() 上的图像修改

Question

网页：http://www.honlapkell.hu/room/fooldal/

问题：我想解决的问题是：当我点击楼上所有 7 张菜单图片时，我想更改背景元素的类，因为在 CSS 中，新类的属性重新定义了类元素的颜色（从灰度到普通）

该网页：

<div style="position:relative;">
<div class="aszoba" style="background-size: contain; position: relative; background-image: url(http://www.honlapkell.hu/room/wp-content/uploads/2015/01/hatterr.jpg); box-shadow: 0px 40px 40px #323131;"><img src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/3d-view-blue-minimalistic-wall-szines1.png" alt="3d-view-blue-minimalistic-wall-szines" width="1920" height="1197" class="alignnone butorok size-full wp-image-377" />
<div class="element" style="position: absolute; top: 41%; left: 75.5%;">    
    <div class="title" style="margin-bottom:14px; width:240px;">The Room in the Media</div>
    <a href="#media"><img class="nagyul teve" onclick="className='leesikk';i=i+1;" style="height:125px; margin-left:40px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tev.png" alt="tev" class="alignnone size-full wp-image-65" /></a>
</div>
<div class="element"  style="position: absolute;  top: 41%;">
    <div class="title" style="width:150px; margin-bottom:-0px;">Guestbook</div>
    <a href="#guestbook"><img class="nagyul" onclick="className='leesikk'" style="width:80px; margin-left: 32px; height: 65px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/visitor.png" alt="pen" class="alignnone size-full wp-image-76" /></a>
</div>
<div class="element"  style="position: absolute; top: 21%;">
    <div class="title" style="width:100px; margin-left:10px;">Contact</div>
    <a href="#contact"><img onclick="className='leesikk'" class="nagyul" style="height:70px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/redphone.png" alt="pen" class="alignnone size-full wp-image-76" /></a>
</div>

<div class="element"  style="position: absolute; top: 1%;">
    <div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">Gallery</div>
    <a href="#gallery"><img class="nagyul" onclick="className='leesikk'" style="height:110px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tumblr_lv3yt6QIMz1ql6a52o1_1280.png" alt="pen" class="alignnone size-full wp-image-76" /></a>
</div>
<div class="element"  style="position: absolute;  top: 61%;">
    <div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">FAQ</div>
    <a href="#faq"><img class="nagyul" onclick="className='leesikk'" style="height:78px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/faq.png" alt="pen" class="alignnone size-full wp-image-76" /></a>
</div>

<div class="element"  style="position: absolute;  top: 81%;">
    <div class="title" style="width:75px; margin-left:10px; margin-bottom:10px;">Booking</div>
    <a href="#booking"><img class="nagyul" onclick="className='leesikk'" style="height:130px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/calendar2.jpg" alt="pen" class="alignnone size-full wp-image-76" /></a>
</div>
<div class="element"  style="position: absolute; top: 101%;">
    <div class="title" style="width:170px; margin-left:45px; margin-bottom:20px;">Our Rooms</div>
    <a href="#ourrooms"><img class="ajto" onclick="className='leesikk'" style="width:203px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/Door-Skin-HD-8008-.jpg" alt="pen" class="alignnone size-full wp-image-76" /></a></div>
</div>

JavaScript：

<script>
  function myfunction()
  {
    var x = element.onclick(); var y=0;
    if (x&&element.className==='leesikk') {y=y+1};
    console.log(x);
    if (y===7) {aszoba.className=leesikk}
  }
</script>

Answer 1

请看下面的文章。特别是"removeClass"和"addClass"jQuery函数。

jQuery - 获取和设置 CSS 类

Answer 2

为什么不使用这样的东西来更改单击时元素的类。

$('.element-you-click-here').on('click', function(){
    $('#change-this').removeClass('current');
    $(this).addClass('this-is-class-to-add');
});

JSfiddle

注意：这是jQuery，你需要jQuery库。