Question

首先，让我解释一下我想要实现的目标。我有一首诗，你需要点击“强调”这个词。当你点击一个单词时，jQuery会加粗它。我有一个提交按钮，如果你点击按钮时有正确的单词加粗，我想要发生一些事情。我已经尝试检测项目是否具有焦点，或者是否已单击该项目，但没有任何工作。

$("#w4").on(iEng.et('click'),function(){
        $(this).data('clicked', true);
    });

    $('#w1').on(iEng.et('click'),function() {
        $(this).css("font-weight","bold");
        $('#w2').css("font-weight","normal");
        $('#w3').css("font-weight","normal");
        $('#w4').css("font-weight","normal");
        $('#w5').css("font-weight","normal");
    });



    $('#w2').on(iEng.et('click'),function() {
        $(this).css("font-weight","bold");
        $('#w1').css("font-weight","normal");
        $('#w3').css("font-weight","normal");
        $('#w4').css("font-weight","normal");
        $('#w5').css("font-weight","normal");

    });

    $('#w3').on(iEng.et('click'),function() {
        $(this).css("font-weight","bold");
        $('#w1').css("font-weight","normal");
        $('#w2').css("font-weight","normal");
        $('#w4').css("font-weight","normal");
        $('#w5').css("font-weight","normal");

    });

    $('#w4').on(iEng.et('click'),function() {
        $(this).css("font-weight","bold");
        $('#w1').css("font-weight","normal");
        $('#w2').css("font-weight","normal");
        $('#w3').css("font-weight","normal");
        $('#w5').css("font-weight","normal");

    });



    $('#w5').on(iEng.et('click'),function() {
        $(this).css("font-weight","bold");
        $('#w1').css("font-weight","normal");
        $('#w2').css("font-weight","normal");
        $('#w3').css("font-weight","normal");
        $('#w4').css("font-weight","normal");

    });

此外，如果相关，我使用名为Hype的程序来生成html5代码。

任何帮助将不胜感激。谢谢。

Answer 1

如果文本是粗体，则它必须包含在某个容器元素中，很可能是span。因此，使用JQuery（或只是JavaScript），您可以在文本中查找这些元素并检查其中的单词。

如果单击一个单词使其变为粗体，则可以右键单击它，然后选择“检查元素”（在大多数浏览器中）。然后，您可以轻松查看使用了哪种元素。

我添加了一个不使用id的剪切，但是使用了类。优点是您可以为多个元素使用相同的类。这使您可以大大减少代码，因为所有元素都具有相同的行为。在这种情况下，对点击的单词进行粗体化并取消其余部分的取消只是几行。如果您需要，如果方便其他情况，您仍然可以使用ID。

对于检查，我得到粗体元素的文本，并在这种情况下将其与单词“base”进行比较。如果这个词是特定的'是'，那么这个检查不会削减它，当然，但我不知道这是否适用于你的情况。

// The logic only applies to elements inside the div 'poem'.
$('.poem')
  
  // Add an on click handler to '.poem', that is triggered when a '.word' inside it is clicked.
  // This allows you to change the words dynamically (as long as you will also add the spans 
  // around it) without having to re-assign the events.
  .on('click', '.word', 
    function(){

      // Remember the state, so you can actually toggle a word on and off.
      // If you don't need that, you can just remove the class from all elements, and
      // then call $(this).addClass('selected');
      var wasSelected = $(this).hasClass('selected');

      $('.word').removeClass('selected');

      $(this).toggleClass('selected', !wasSelected);
    })

  // Event handler like above. Responds to clicks on a button inside '.poem'.
  .on('click', 'button', function(){
      var $words = $('.poem .word.selected');
      if ($words.length == 0) 
      {
        alert('Please select a word');
        return;
      }

      // Get the text of the selected word.
      var selectedText = $words.text();
      if (selectedText == 'base') 
        alert('yay'); 
      else 
        alert('nay');
    });

.word.selected {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poem">
<span class="word">roses</span>
<span class="word">are</span>
<span class="word">red</span>,
<span class="word">violets</span>
<span class="word">are</span>
<span class="word">blue</span>,
<span class="word">all</span>
<span class="word">my</span>
<span class="word">base</span>
<span class="word">are</span>
<span class="word">belong</span>
<span class="word">to</span>
<span class="word">you</span>.
<button>check</button>
</div>

Answer 2

我假设每个单词都包含在它自己的元素（可能是<span>）中，基于你上面的id名称。 w{value}似乎会在诗中指定单词编号。如果这是错误的，请纠正我。在这种情况下，您的解决方案应该很简单。

只要您的初始样式位于<style>标记或外部样式表中，以下解决方案就可以使用。

当jQuery向元素添加样式时，它使用style="..."属性将它们内联添加。选择粗体元素时，只需检查此属性，如下所示：

var word = $('div[style]').text();

具有style属性的单词是用户的选择。选择后，使用上面演示的.text()来提取所选单词。

修改

根据您对其他答案的评论，您似乎可以将所选单词与诗中的正确单词进行比较（单词4）。为此，请执行以下操作：

if($('div[style]').text() === $('#w4').text()) { ... // handle correct response } else { ... // handle error response }

我知道这可能是一个很大的飞跃，但你可以通过稍微改变你的逻辑来证明自己。如果有时候翻译过这些单词，你可以改为将逻辑基于元素的id值，如下所示：

if($('div[style]')[0].id = "w4") { ... // handle correct response } else { ... // handle error response }

编辑2：根据下面的评论主题，初始内联样式似乎是自动生成的，无法删除。为了适应这种情况，我们可以更改我们的选择器来搜索特定的CSS属性（有点hacky但它有效）：

变化：

$('div[style]')

为：

$('div[style*="font-weight: bold"]')

<强>参考文献：

jQuery Attribute Selectors

如何检测元素是否通过jquery更改了其css？

2 个答案: