Question

我有这三个功能，我也想应用DRY原则。

JS

function shakeBell(){
  document.getElementById('shakeBell').play();
}

function shakeShake() {
  document.getElementById('shakeShake').play();
}

function blowWhistle(){
  document.getElementById('blowWhistle').play();
}

HTML

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
<a href="javascript:shakeBell();">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>
<img src="images/Maracas.png" style="width:100px; height:100px;">
</div>

我有多张图片，点击后会播放该图片的特定声音文件。如何在不为每个图像创建单独功能的情况下执行此操作？

Answer 1

您可以使用一个参数执行单个功能，例如：

function shake(id){
  document.getElementById(id).play();
}

然后你可以称之为：

<a href="javascript:shake('shakeBell');">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>

Answer 2

JS：

// builtin libraries
var spawn = require('child_process').spawn;
var exec = require('child_process').exec;

// external libraries
var express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var S = require('string');

// create upload directory if it doesn't exist
var dir_upload = "/tmp/algorithm/files/"
exec("mkdir -p " + dir_upload, {}, function (err, stdout, stderr) {
 if (err) throw err;
});

app.use(express.static('public'));

// parse text fields
app.use(bodyParser.urlencoded({ extended: false }));

// parse files
app.use(multer({ dest : dir_upload }).fields([{name: 'out'}, {name: 'label'}, {name: 'minor'}]));

// display form
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/form.html');
})

app.post('/', function (req, res) {

  res.writeHead(200, {'Content-Type': 'text/plain', 'Transfer-Encoding': 'chunked'});

  // add parameters to array
  var args = [];
  var vopt = false;
  var vstr = "";
  var keys = Object.keys(req.body), len = keys.length, i = 0;
  while (i < len) {
      // basic argument parsing - not shown here
  }

  // get input file paths
  args.push(req.files.out[0].path);
  args.push(req.files.label[0].path);
  if (req.files.minor) args.push(req.files.minor[0].path);

  // run algorithm
  var command = __dirname + "/../algorithm_dir/src/algorithm";

  // provide env mainly for AWS CentOS environments with old GCC versions
  var algorithm = spawn(command, args, { shell: true, env: { 'LD_LIBRARY_PATH': '/usr/local/lib:/usr/lib:/usr/local/lib64:/usr/lib64' }});
  var output = "";

  algorithm.stdout.on('data', function (data) {
    res.write(data.toString());
  });

  algorithm.on('close', function () {
    res.end("\n----------DONE----------");

    // remove input files
    exec("rm -rf " + req.files.out[0].path + " " + req.files.label[0].path + " " + req.files.minor[0].path,
         {}, function (err, stdout, stderr) {
      if (err) throw err;
    });
  });
})

// listen on port 8080
var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
})

HTML：

  function playSound(data) {
        document.getElementById(data).play();
}

Answer 3

定义事件侦听器而不是内联JS。为锚点提供与其播放的声音相关的ID - 在我的示例中，我将_a添加到ID中。

const soundIds = ['shakeBell', 'shakeShake', 'blowWhistel'];
soundIds.forEach(function(id) {
    document.getElementById(id + '_a').addEventListener(function() {
        document.getElementById(id).play();
    });
});

<audio id="shakeBell"  src="audio/bell-ringing-02.mp3" preload="auto"></audio>
<audio id="shakeShake"  src="audio/pill-bottle-1.mp3" preload="auto"></audio>
<audio id="blowWhistle"  src="whistle-flute-2.mp3" preload="auto"></audio>

<div class="imagelist">
<a href="#" id="shakeBell_a">
<img src="images/Golden_Bell.png" style="width:100px; height 100px;"></a>
<img src="images/Maracas.png" style="width:100px; height:100px;">
</div>

Javascript执行点击功能

3 个答案: