Question

我正在制作类似javascript / jQuery Hangman的游戏，我在从虚拟键盘键中选择HTML内容时遇到问题：

<div class="square keyboard">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Q
            </div>
        </div>
    </div>
</div>

基本上，这是显示在屏幕上的虚拟键盘中的一个键。我想写一个函数来检查点击了哪个字母（我知道这个结构对于keyborad上的一个简单按钮来说太复杂了，但我希望它能够响应，例如。按钮的大小会根据设备和这是我想出的最好的）。这是我的代码：

function isClicked($param){

    var letter = $param.text()
    console.log(letter) //just to check what has been pressed
}

然后我把这个功能放在这里：

$('.keyboard').click(function() {
    isClicked($(this));
})

问题是，当我点击一个键时，我得到this，当然当我将它与字母“Q”进行比较时，它返回False。我尝试了.html（）而不是.text（），它返回了按钮的实际html代码，摆弄了.find（），。filter（）和其他函数，它通常返回“undefined”。我该怎么做才能得到这封信？ PS。我无法在<p></p>内插入这封信，因为它会影响键的布局，因此与键相比，字母会略高。

Answer 1

func setCardView()
  {
    let cornerRadius: CGFloat = 10
    let shadowOffsetWidth: Int = 0
    let shadowOffsetHeight: Int = 0
    let shadowColor: UIColor? = UIColor.gray
    let shadowOpacity: Float = 0.5
    layer.cornerRadius = cornerRadius
    layer.masksToBounds = false
    layer.shadowColor = shadowColor?.cgColor
    layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
    layer.shadowOpacity = shadowOpacity
  }

将isClicked函数更改为

时可以正常工作

$('.keyboard.table-cell').on('click', isClicked);

Answer 2

您需要使用String.trim修剪字母周围的空白。

var letter = $param.text().trim()

但使用属性进行此类操作通常会更好，例如在元素上设置data-letter="Q"，然后使用$(this).data('letter')来检索它。

Answer 3

使用var letter = $param.text().trim()

＆＃13;

function isClicked($param){

    var letter = $param.text().trim()
    console.log('Q') //just to check what has been pressed
}


$('.keyboard').click(function() {
    isClicked($(this));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square keyboard">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Q
            </div>
        </div>
    </div>
</div>

＆＃13;

从嵌套div

3 个答案: