如何調用一個CSS類onclick事件

功能我有以下代碼：如何調用一個CSS類onclick事件

<title>Web Audio API</title> 
</head> 
<body> 

    <div class="post red"> 
     <div class="inner"> 
     <h2 class="title">Oscillator</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
      <input id="red" type="range" min="50" max="5000" step="1" value="90"/> 



     </div> 
     </div> 

    </div> 
    </a> 

    <a href="#"> 
    <div class="post green"> 
     <div class="inner"> 
     <h2 class="title">Filter</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
      <input id="green" type="range" min="50" max="5000" step="1" value="90"/> 

      <input id="green" type="range" min="50" max="5000" step="1" value="90"/> 



      <script> 



     </script> 
     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post purple"> 
     <div class="inner"> 
     <h2 class="title">LFO</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 

     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post lime_green"> 
     <div class="inner"> 
     <h2 class="title">VCO</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post pink"> 
     <div class="inner"> 
     <h2 class="title">Placeholder</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post orange"> 
     <div class="inner"> 
     <h2 class="title">Placeholder</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post yellow"> 
     <div class="inner"> 
     <h2 class="title">Placeholder</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
     </div> 
     </div> 
    </div> 
    </a> 

    <a href="#"> 
    <div class="post blue"> 
     <div class="inner"> 
     <h2 class="title">Placeholder</h2> 
     <div class="post_info"> 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
     </div> 
     </div> 
    </div> 
    </a> 

</body>

// JS

  context = new AudioContext(); 
      var osc = document.getElementByClassName('post red'); 


      osc.onmousedown = function() { 
      var oscPitch = document.getElementByClassName('post red').value; 
      oscillator = context.createOscillator(), 
      oscillator.type = 0; 
      oscillator.frequency.value = oscPitch; 
      oscillator.connect(context.destination); 
      oscillator.start(osc); 

     }; 

     osc.onmouseup = function() { 
      oscillator.disconnect(); 
     };

我的嘗試是在CSS類單擊事件上運行js代碼。說：紅色

我不知道是否有人知道如何做到這一點。基本上它只是發揮振盪器的聲音。其餘的代碼並不重要。謝謝！

來源

2017-03-08 eshalit

（1）它是'getElementsByClassName'（注意具有S的多個元件）。（2）它返回一個節點列表，所以需要通過索引迭代或者只使用第一個。 – Abhitalks

感謝您的回答，但我已經研究過，似乎瀏覽器不需要節點列表中的項目來知道您指的是說父級CSS類元素。節點中的第一個。我錯了嗎？ – eshalit

請閱讀此處：https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName – Abhitalks

您可以使用.click()確定何時點擊red類。這是一個例子。在這種情況下，點擊它只會顯示一個警報。您只需使用音頻功能更改警報。

jQuery(document).ready(function(){ 
 
    $('.red').click(function(){ 
 
    if($(this).hasClass('post')){ 
 
    $(this).find('input').each(function(i){ 
 
     // equal to var oscPitch = document.getElementByClassName('post red').value; 
 
     var oscPitch = $(this).val(); 
 
     alert(oscPitch); 
 
    }) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<title>Web Audio API</title> 
 
</head> 
 
<body> 
 

 
    <div class="post red"> 
 
     <div class="inner"> 
 
     <h2 class="title">Oscillator</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
      <input id="red" type="range" min="50" max="5000" step="1" value="90"/> 
 

 

 

 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post green"> 
 
     <div class="inner"> 
 
     <h2 class="title">Filter</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
      <input id="green" type="range" min="50" max="5000" step="1" value="90"/> 
 

 
      <input id="green" type="range" min="50" max="5000" step="1" value="90"/> 
 

 

 

 
      <script> 
 

 

 

 
     </script> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post purple"> 
 
     <div class="inner"> 
 
     <h2 class="title">LFO</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 
 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 
 
      <input id="purple" type="range" min="50" max="5000" step="1" value="90"/> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post lime_green"> 
 
     <div class="inner"> 
 
     <h2 class="title">VCO</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post pink"> 
 
     <div class="inner"> 
 
     <h2 class="title">Placeholder</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post orange"> 
 
     <div class="inner"> 
 
     <h2 class="title">Placeholder</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post yellow"> 
 
     <div class="inner"> 
 
     <h2 class="title">Placeholder</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="post blue"> 
 
     <div class="inner"> 
 
     <h2 class="title">Placeholder</h2> 
 
     <div class="post_info"> 
 
      <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p> 
 
      <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
</body>

來源

2017-03-08 07:30:37

爲什麼不在相同的選擇器中使用這兩個類（紅色和後）？你可以像'$（'。post.red'）'而不是'$（'。red'）一樣使用click（function（）{'和後面的'if（$（this）.hasClass（'post'）））{' –

我不知道OP是否想要把這兩個類一起對待，也許在某些情況下，他不想發動這個事件，即使這個元素有這兩個類。 –

感謝你們所有的答案真棒！ – eshalit

使用

document.getElementsByClassName('post red')

代替

document.getElementByClassName('post red')

來源

2017-03-08 07:31:15 shanu

如果你想在純JavaScript的情況下，你可以做到以下幾點。

var osc = document.getElementsByClassName("post red")[0]; 
var oscPitch = osc.value; 

osc.addEventListener("click",function(e){ 
    oscillator = context.createOscillator(), 
    oscillator.type = 0; 
    oscillator.frequency.value = oscPitch; 
    oscillator.connect(context.destination); 
    oscillator.start(osc); 
}, false);

來源

2017-03-08 07:45:28

既然你只有一個具有輸入類red那麼你osc變量應該是這樣的聲明。

var osc = document.getElementsByClassName('post red')[0];

要檢測您的開始事件以播放聲音，您應該使用addEventListener。

osc.addEventListener("click", function(){ 

});

綜上所述。

 context = new AudioContext(); 
     var osc = document.getElementsByClassName('post red')[0]; 
     var oscPitch = osc.value; 
     var oscillator = context.createOscillator(); 
     oscillator.type = 0; 
     oscillator.frequency.value = oscPitch; 
     osc.addEventListener("mousedown", function(){ // or any other event 
     oscillator.connect(context.destination); 
     oscillator.start(osc); 
     }); 
     osc.addEventListener("mouseup", function(){ // or any other event 
     oscillator.disconnect(); 
     });

來源

2017-03-08 07:48:18

謝謝！我嘗試了以下，現在我有一個基於Web音頻的問題:(也許你會知道那個答案？）我在控制檯中得到以下內容：提供的值'0'不是一個有效的類型的枚舉值OscillatorType。該項目是可見的：https：//github.com/Elemino/wave_album – eshalit

@eshalit我認爲這個答案涵蓋你http://stackoverflow.com/questions/32069376/audiocontext-oscillator-stopped-working –

Here's the aforementioned red css class: 

    .post { 
     width: 50%; 
     float: left; 
     min-height: 400px; 
    color: $white; 
    display: table; 
     .inner { 
    display: table-cell; 
    vertical-align: middle; 
    padding: 0 15%; 
    } 
    .title { 
    font-size: 1.75em; 
    } 
    .post_info { 
    .date, .read_length { 
     display: inline; 
     font-size: 1.1em; 
    } 
    .date { 
     margin-right: 1em; 
    } 
    } 

    transition: background 0.4s ease-in-out; 
} 

.red { 
    background: $red; 
    .post_info { 
    .date { 
     color: #A25F5E; 
    } 
    .read_length { 
     color: #F8B4B2; 
    } 
    } 
    &:hover { 
    background: darken($red, 10%); 
    }

}

來源

2017-03-08 07:51:37 eshalit

如何調用一個CSS類onclick事件

回答

相關問題