Question

现在我正在尝试制作一个完成以下目标的程序：

在本地网页上，有一个HTML页面，用于强调用户点击的字词。
如果用户点击带下划线的字词，则会使该字词不再加下划线。
当用户提交页面时，它知道哪些单词加下划线。

问题是，我真的不懂JavaScript，HTML或CSS。我知道要求某人制作这样的东西可能有点多，我不知道这有多难，但如果有人能告诉我我需要做什么来做这件事会非常有帮助。 / p>

Answer 1

以下是您可能需要考虑的解决方案：

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(','));
    });
});

Answer 2

你可以使用正则表达式在jQuery中执行此操作。我在alex帖子中使用了this的代码将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);
});

link

Answer 3

这是帮助您入门的基本框架。

HTML文件＆＃39; index.html＆＃39;：

<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文件＆＃39; app.js＆＃39;：

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

});

function toggleUnderline(element) {
  $(element).toggleClass('underline');
}

CSS文件＆＃39; mystyle.css＆＃39;：

p.underlined {
  text-decoration: underline;
}

Answer 4

我只使用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;
}

Answer 5

我会将以下类添加到您的css文件中：

.underline {
    text-decoration: underline;
}

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

不幸的是，我看到它的唯一方法（业余人士的观点）是将每个单词包装在HTML标签中（让我们使用，这样就赢了影响任何当前的样式）。您可以创建一个脚本来执行此操作，也可以手动执行。所以你在页面上的文字如下所示：

Word 1, Word 2, Word 3, 

接下来，您只需要一个类似于以下内容的简单jQuery脚本：

$(document).ready(function() {
    $('span').on('click', function() {
        $(this).addClass('underline');
    });
});

如果用户再次点击该字词（提示，您可能希望更改我提供给您的代码），以及确定哪些字已加下划线，我会让您弄清楚是否反转下划线。提示：您希望使用 jQuery 。

Answer 6

我不确定您计划使用它的确切方法，但这是另一条可能的路线。这真的取决于你应用这个。但就像其他人一直在说的那样。使用jQuery或Javascript将您的文本块转换为跨度，然后使用类似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;
}

强调单击的单词，并检测带下划线的单词（HTML，JS或CSS）

6 个答案: