divをオフにして背景を切り替える

Question

複数のdivで背景をオン/オフを切り替えることができるJavaScript/jQueryを探しています。

メニューをクリックして料理を強調表示したいウェブサイトを作成しています。また、私はそれが電話、タブレット、ブラウザで動作するようにしたい。

.full-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.menu-wrapper { 
 
    height: 2em; 
 
    width: 24em; 
 
    background: #fff; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    margin: 10px auto; 
 
}

<div class="full-wrapper"> 
 
    <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
     <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
      <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
       <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
        <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
         <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
</div>

私は上と簡単なJavaScriptを使用してオフに背景を切り替えるにはクリックできるようにしたいです。

また、ブラウザ、タブレット、電話の両方で複数のdivの背景を切り替えることができる必要があります。

私はいくつかのスクリプトを試していましたが、私が見つけたことを修正しましたが、知識が不足しているので、何か助けが必要です。

Answer 1

いくつかのCSS：

.bg-red { 
    background:red; 
} 

いくつかのJavaScript

$('.menu-wrapper').on('click', function(){ 
    $(this).toggleClass('bg-red'); 
}); 

そして、あなたはこの

$('.menu-wrapper').on('click', function(){ 
 
\t $(this).toggleClass('bg-red'); 
 
});

.full-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.menu-wrapper { 
 
    height: 2em; 
 
    width: 24em; 
 
    background: #fff; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    margin: 10px auto; 
 
} 
 
.bg-red { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="full-wrapper"> 
 
    <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
     <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
      <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
       <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
        <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
         <div class="menu-wrapper">Click and toggle background between red and white</div> 
 
</div>

Answer 2

を取得モバイルデバイスでの作業

ため