Question

我正在尝试创建一个完整的句子游戏。游戏的目的是使玩家拥有三个单词，他们需要以正确的顺序排列三个单词以完成句子。他们每个单词只能使用一次

代码必须是可重用的，将有多个项目，并且此脚本在整个游戏中将需要重复使用多次。

$(".control").click(function() {
      let val = $(this).text();
      $(".blank").html(val);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <p>You will <span class="blank"></span> know <span class="blank"></span> 
    I <span class="blank"></span> you.</p>
    </div>

    <button class="control">never</button>
    <button class="control">know</button>
    <button class="control">love</button>

仅在跨度上使用以上代码时。

Answer 1

$(".blank")目标是页面上具有类blank的 all 个元素。

如果您要查找每个按钮，请单击以替换下一个空白空白，而是使用:empty和:first选择器的组合。

要在单击按钮时禁用该按钮，请使用disabled将其true属性设置为.prop("disabled", true)。

$(document).ready(function() {
  $(".control").click(function() {
    let $this = $(this);
    let val = $this.text();
    $this.prop("disabled",true);
    $(".blank:empty:first").html(val);
  });
});

span.blank {
  display: inline-block;
  border-bottom: 1px solid black;
  min-width: 40px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>You will <span class="blank"></span> know <span class="blank"></span> I <span class="blank"></span> you.</p>
</div>

<button class="control">never</button>
<button class="control">know</button>
<button class="control">love</button>

用javascript创建一个完整的句子游戏

1 个答案: