堆棧內存溢出
  簡體   English   中英

如何在 css 類 onclick 事件上調用函數

[英]How to invoke a function on a css class onclick event

 原文  2017-03-08 07:16:45  5   4    javascript/ jquery/ css

問題描述

我有以下代碼：

<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 代碼。 說：紅色

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

4 個解決方案

解決方案1
 0  2017-03-08 07:30:37

您可以使用.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>

解決方案2
 0  2017-03-08 07:31:15

采用 

document.getElementsByClassName('post red')

代替 

document.getElementByClassName('post red')

解決方案3
 0  2017-03-08 07:45:28

如果要使用Pure 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);

解決方案4
 0  2017-03-08 07:48:18

由於您只有一個輸入具有 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();
      });

解決方案5
 0  2017-03-08 07:51:37

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%);
  }

}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在錨點標記中以編程方式調用onclick（）事件，同時在onclick函數中保留“this”引用？ 如何在 select2 上調用 onclick 事件 如何將 JavaScript onclick 事件設置為帶有 css 的類 如何添加 CSS class 和 onclick 事件？ 為什么在onclick事件之后需要function（）{...}來調用函數？ 在onclick事件期間從速度模板調用Java函數 如何在“ div”中的“ onClick”事件中調用“ AktionLink”？ 如何在JavaScript上的特定動態按鈕上調用onclick事件 onClick事件+ jQuery在不同的div中修改類CSS樣式 Google Analytics（分析）-使用Javascript和CSS類的OnClick事件跟蹤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM