现在我正在尝试编写一个程序来完成以下目标:
- 从一个本地网页,有一个HTML页面,强调用户点击的单词。
- 如果用户单击带下划线的单词,则该单词不再带下划线。
- 当用户提交页面时,它知道哪些单词加了下划线。
问题是,我真的不知道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>
$(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;
}