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

Question

问题

我正在构建可以：

的JS代码

1. 在sentences
中的div创建一个数组
2. 从每个key words
中提取string
3. 将关键词放在合适的位置以动态执行代码。
＆＃13;
＆＃13;
//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')
  });



});
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

动态代码

获取从句子中提取的关键词。

$(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>