javascript - 如何在动态代码中从字符串中插入匹配的单词？

Question

问题

我构建的 JS 代码可以:

1. 从 div 中的 sentences 创建一个数组
2. 从每个字符串中提取关键词
3. 将关键字放在适当的位置以动态执行代码。

//Hocus Pocus
//A function just transformed the sentences from .sendToJS in the HTML to an array like this

sentences = [
  ".box1 is click, change background to green",
  ".box2 is dblclick, change height to 200px",
  ".box3 is hover, change border to red",
  ".box4 is click, change border-radius to 20px",
  ".box5 is click, change transition to .3s",
]

sentences.forEach(function(s, i) {
  Broken = /(^.+?(?=,))(,\s)(.*)/g.exec(s)
  a = Broken[1]
  b = Broken[3]

  c = /(.*) is (\w+$)/g.exec(a)
  d = /(\w+ )(.*)( to )(.*)$/.exec(b)
  who = "'" + c[1] + "'" //example .box1
  evt = "'" + c[2] + "'" //example click
  change = "'" + d[2] + "'" //example background
  to = "'" + d[4] + "'" //example green

  //For some reason I can't get this part to work
  //I have everything necessary for it to work… yet it will not work
  $(who).on(evt, function() {
    $(who).css(change, to)
    console.log('executed')
  });



});

body {
  background: #E7F0F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sendToJS {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.boxes {
  width: 100px;
  height: 100px;
  background: white;
  margin: 10px;
  border-radius: 10px;
  position: relative;
  transition: .3s;
}

.boxes:hover {
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25), 0 0px 0px 1px #36BCFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sendToJS">
  If .box1 is clicked, change background to green. If .box2 is dblclicked, change height to 200px. If .box3 is hovered, change border to red. If .box4 is clicked, change border-radius to 20px. If .box5 is clicked, change transition to .3s.
</div>

<div class="boxes box1"></div>
<div class="boxes box2"></div>
<div class="boxes box3"></div>
<div class="boxes box4"></div>
<div class="boxes box5"></div>

动态代码

采用从句子中提取的关键词。

$(who).on(evt, function(){
    $(who).css(change, to)
    console.log('executed')
});

执行示例

$('.box1').on('click', function(){
    $('.box1').css('background', 'green')
    console.log('executed')
});

Answer 1

无需在所有提取的值周围添加单引号。您也没有声明您的变量。

hover 不是有效事件，请分别使用 mouseenter 和 mouseleave 编写脚本。

固定代码:

//Hocus Pocus
//A function just transformed the sentences from .sendToJS in the HTML to an array like this

var sentences = [
  ".box1 is click, change background to green",
  ".box2 is dblclick, change height to 200px",
  ".box3 is mouseenter, change border to 3px solid red",
  ".box3 is mouseleave, change border to none",
  ".box4 is click, change border-radius to 20px",
  ".box5 is click, change transition to .3s"
];
sentences.forEach(function(s, i) {
  var broken = /(^.+?(?=,))(,\s)(.*)/g.exec(s);
  var a = broken[1];
  var b = broken[3];

  var c = /(.*) is (\w+$)/g.exec(a);
  var d = /(\w+ )(.*)( to )(.*)$/.exec(b);
  var who = c[1]; //example .box1
  var evt = c[2]; //example click
  var change = d[2]; //example background
  var to = d[4]; //example green

  //For some reason I can't get this part to work
  //I have everything necessary for it to work… yet it will not work
  $(who).on(evt, function() {
    $(who).css(change, to);
    console.log('executed');
  });



});

body {
  background: #E7F0F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sendToJS {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.boxes {
  width: 100px;
  height: 100px;
  background: white;
  margin: 10px;
  border-radius: 10px;
  position: relative;
  transition: .3s;
}

.boxes:hover {
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25), 0 0px 0px 1px #36BCFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sendToJS">
  If .box1 is clicked, change background to green. If .box2 is dblclicked, change height to 200px. If .box3 is hovered, change border to red. If .box4 is clicked, change border-radius to 20px. If .box5 is clicked, change transition to .3s.
</div>

<div class="boxes box1"></div>
<div class="boxes box2"></div>
<div class="boxes box3"></div>
<div class="boxes box4"></div>
<div class="boxes box5"></div>