给点击的单词加下划线，以及检测加下划线的单词(HTML、JS或CSS)

Underlining Clicked Words, and Detecting Underlined Words (HTML, JS, or CSS)

本文关键字：下划线 HTML JS CSS 单词 检测 单词加      更新时间：2023-09-26

现在我正在尝试编写一个程序来完成以下目标:

  1. 从一个本地网页，有一个HTML页面，强调用户点击的单词。
  2. 如果用户单击带下划线的单词，则该单词不再带下划线。
  3. 当用户提交页面时，它知道哪些单词加了下划线。

问题是，我真的不知道JavaScript, HTML或CSS。我知道让别人做这样的事情可能有点过分，我不知道这到底有多困难，但如果有人能告诉我需要做什么才能做到这一点，那将是非常有帮助的。

您可能需要考虑以下解决方案:

http://jsfiddle.net/rmadhuram/kt6o6xbh/2/

HTML: 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie tempor molestie. ...</p>
<button type="button">Submit</button>
CSS: 

span.underline {
  text-decoration: underline;
  color: blue;
} 
span {
  cursor: pointer;
}
JavaScript: 

$(function () {
    var contents = $('p').text().split(' '),
        modText = '';
    for (var i = 0; i < contents.length; i++) {
        modText += '<span>' + contents[i] + '</span> ';
    }
    $('p').html(modText);
    $('p').click(function (e) {
        $(e.target).toggleClass('underline');
    });
    $('button').click(function() {
        var selected = [];
        $('span.underline').each(function() {
            selected.push($(this).text());
        });
        alert('Selected: ' + selected.join(','));
    });
});

这里有一个基本的框架来帮助你开始。

HTML文件'index.html':

<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
  <p>Some text that the user will click<p>
  <p>Some more text that the user will click</p>
</body>
</html>

Javascript文件'app.js':

$( document ).ready(function() {
  $('p').click(function() {
    toggleUnderline(this);
  });
});
function toggleUnderline(element) {
  $(element).toggleClass('underline');
}

CSS文件'mystyle.css':

p.underlined {
  text-decoration: underline;
}

您可以在jQuery中使用regex完成此操作。我在这篇文章中使用alex的代码将p中的所有单词拆分为span。

var p = $('p');
p.html(function (index, oldHtml) {
    return oldHtml.replace(/'b('w+?)'b/g, '<span class="word">$1</span>')
});

从这里，我添加了一个函数来查找点击.word元素，点击.toggleClass("underlined")。

$(".word").on("click", function() {
    $(this).toggleClass("underlined");
});

在css中:

.underlined {
    text-decoration: underline;
}

你可以在jsfiddle上看到。

编辑:抱歉，我看到你想追踪点击字数。这是这样做的:

$("#submit").on("click", function() {
    var words = new Array();
    $(".underlined").each(function() {
        words.push($(this).text());
    });
    alert(words);
});
链接

我只使用HTML, JQuery和CSS来显示下划线的单词，你可以做一个循环，在每个单词中添加一个id，保存id并显示单词。

HTML 

<div>
<a id="1">word1</a> 
<a id="2">word2</a> 
<a id="3">word3</a>
</div>
JQuery 

$('a').on('click', function() {
var word = $(this).attr('id');
$('#' + word).toggleClass('underline');
});
CSS 

.underline {
   text-decoration: underline;
}

我将添加以下类到您的css文件:

.underline {
    text-decoration: underline;
}

当HTML元素应用此CSS样式时，它将收到下划线。

不幸的是，我看到它的唯一方法(业余的角度)是把每个单词都包装在HTML标签中(让我们用<span></span>，这样就不会影响任何当前的样式)。您可以创建一个脚本来执行此操作，或者手动执行。所以你在页面上的单词看起来像这样:

<span>Word 1, </span><span>Word 2, </span><span>Word 3, </span>

接下来，您只需要一个简单的jQuery脚本，如下所示: 
$(document).ready(function() {
    $('span').on('click', function() {
        $(this).addClass('underline');
    });
});

我将让您弄清楚如果用户再次单击该单词(提示，您可能想要更改我给您的代码)，以及弄清楚哪些单词已经加了下划线。提示:您需要使用jQuery

我不确定你打算用这个做什么，但这里有另一种可能的路线。这取决于你把它应用于什么。但就像其他人一直说的那样。使用jQuery或Javascript将文本块转换为span，然后使用toggleClass()之类的东西添加或删除将对其应用下划线的类。

http://jsfiddle.net/theDreamer/mzujf6yg/

HTML 

<body>
    <div class="container">
        <p class="target-paragraph">    
           Literally pour-over jean shorts keytar, swag Helvetica Odd Future fap gastropub seitan cray. Cornhole squid polaroid, readymade pour-over cred American Apparel brunch try-hard PBR art party. Fap synth kale chips put a bird on it DIY blog. Four loko master cleanse semiotics, raw denim cliche selvage DIY 3 wolf moon VHS tattooed readymade pork belly polaroid cred wolf. Pop-up fanny pack mumblecore fap. Drinking vinegar Blue Bottle Helvetica XOXO High Life single-origin coffee, Etsy plaid YOLO scenester Banksy. Banjo 8-bit distillery, mlkshk hoodie fap chillwave crucifix letterpress salvia art party flexitarian asymmetrical
        </p>
        <p class="button">Submit</p>
        <div class="word-bank">
            <h2>Your Selected Words Are</h2>
            <ul class="selected-words">
            </ul>
        </div>
    </div>
</body>
jQuery 

var text = $('p.target-paragraph').text();
//break the text apart on spaces and add the strings to an array
    var words = text.split(" ");
    var newText = "";
    //create a new block of text with each word surrounded by a span
    $.each(words, function(i, val){
        newText = newText + '<span>' + val + '</span> ';
    });
    //replace the original paragraph with the new bext block
    $(".target-paragraph").html(newText);
//Clicking on Span will toggle the 'underlined' class
$('span').click(function(){
    $(this).toggleClass('underlined');
});
//clicking on the button will add underlined words to the array 'selectedWords'
$('.button').click(function() {
    var selectedWords = []; 
    $('.underlined').each(function() {
        var word = $(this).text();
        //strip off any commas or periods
        if( word.substr(-1) === '.' || word.substr(-1) === ',' ) {
            word = word.slice(0,-1);
        }
        //add the word to the array
        selectedWords.push(word);
    });
   //hide the paragraph of text and the button
    $('.target-paragraph').hide();
    $('.button').hide();
    //go through the array of selected words and and them as list items to the page
    $.each(selectedWords, function(i, val) {
        $('.selected-words').append('<li>' + val + '</li>');
    });
    $('.word-bank').show();
});
CSS 

.underlined {
    text-decoration: underline;
}
.container {
    width: 50%;
    margin: 20px auto;
}
.button {
    width: 50px;
    padding: 20px 30px;
    border: 2px solid black;
    margin: auto;
}
.button:hover, span:hover {
    cursor: pointer;
}
.selected-words {
    list-style: none;
    border: 1px solid black;
}
.selected-words li {
    display: inline-block;
    padding: 10px;
}
.word-bank {
    display: none;
    text-align: center;
}
相关文章：