Question

我已经阅读了类似的问题并尝试了一些不同的事情，但到目前为止还没有任何工作。

我正在尝试使用div的id，调用变量并播放声音。

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
target.play();

  
})

.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pad" id="kick"></div>

Answer 1

所以我从问题和代码片段中理解的是，你有一个与HTML元素的id相同的变量名，并且你想要触发与id匹配的变量的play方法。

保存此信息的更好方法是使用数据属性，例如

<div class="pad" data-id="kick"></div>

但是现在我只是给出一个id为

的解决方案

首先，您应该将使用新的Howl创建的所有实例保存到对象

中

let Howls = {};
Howls.kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
// similarly add other sounds

然后在你的点击处理程序中执行此操作

$(".pad").click(function(e){        
var target = e.target.id;
if(Howls[target]){
 Howls[target].play();    
}
})

Answer 2

将case FETCH_MAIN_FEED: return { ...state, posts: action.mainFeedData.posts, featuredWorkouts: action.mainFeedData.posts, mainFeedIsLoading: action.mainFeedIsLoading }; break;替换为target.play

＆＃13;

kick.play

＆＃13;

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
kick.play();

  
})

＆＃13;

.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}

＆＃13;

Answer 3

使用eval：

let kick = new Howl({
  src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});

$(".pad").click(function(e){
    
var target = e.target.id;
console.log(this.id);
eval(target).play();

  
})

.pad {
    position: relative;
    display: inline-block;
    margin: auto;
    height: 40px;
    width: 55px;
    background: #594F4D;
    box-shadow: 1px 1px 1px grey;
    border-radius: 5px;
    padding: 1px;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pad" id="kick"></div>

this.id没有通过功能

3 个答案: