给出了段落列表（<p>）。一旦用户点击A段，A段的类就会变为“激活”。现在用户选择段落B，A和B之间的所有段落将其类别更改为“已激活”。
再次点击B，只剩下A类“有效”。
通过点击A，A和B之间的所有段落（包括A和B）都会删除“有效”类。
不应该“停用”A和B之间的任何段落.A和B之间的选择应该始终是所选段落的不间断列表。
有人能给我一个关于如何用Prototype / Scriptaculous实现这一点的提示吗？该应用程序在Rails中实现，因此RJS中的任何提示都会更受欢迎！
答案 0 :(得分：1)
假设你的段落在一个名为'info'的包装div中:(我没有测试它，但它会是这样的）
$('info').select('P').each(function(element) {
Event.observe(element,'click',function(event){
flipIt(event)
})
})
function flipIt(evt) {
var element = evt.element();
if($(element).hasClassName('active')) {
$(element).removeClassName('active')
}
else {
$(element).addClassName('active')
}
}
答案 1 :(得分：1)
我已经测试了下面的代码并且它可以满足您的需求，尽管它有点令人费解。它的关键是将段落保存在数组中，这是使用Prototype的$$函数实现的。
<style type="text/css">
.activated {
background-color: yellow;
}
</style>
.
.
.
<div id="container">
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<p>This is paragraph 5.</p>
<p>This is paragraph 6.</p>
</div>
<script type="text/javascript">
Event.observe(document, "dom:loaded", function() {
var paragraphs = $$("#container p");
paragraphs.each(function(paragraph, index) {
paragraph.observe("click", function(event) {
// A clicked; toggle activated class on A
if (index == 0) {
toggleStyle(paragraphs[0]);
// A clicked; remove activated class from A + 1 through to B
// if present
for (var i = 1; i <= paragraphs.length; i++) {
if (paragraphs[i] && paragraphs[i].hasClassName("activated")) {
paragraphs[i].removeClassName("activated");
}
}
}
// A + 1 clicked; toggle activated class on A + 1
if (index > 0 && paragraphs[0].hasClassName("activated")) {
for (var i = 1; i <= index; i++) {
toggleStyle(paragraphs[i]);
}
}
});
});
});
function toggleStyle(paragraph) {
if (paragraph.hasClassName("activated")) {
paragraph.removeClassName("activated");
} else {
paragraph.addClassName("activated");
}
}
</script>
答案 2 :(得分：1)
试试这个
<!DOCTYPE HTMP PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<style type="text/css">
.active {
background-color: maroon;
}
</style>
<div id="info">
<p>
1 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br/>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
2 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
3 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
4 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
</div>
<%javascript_tag :defer => 'defer' do -%>
$('info').select('P').each(function(element) {
Event.observe(element,'click',function(event){
flipIt(event)
})
})
function flipIt(evt) {
var element = evt.element();
var all = $('info').select('P');
var first = -1;
var last = -1;
var clicked = 0;
for ( i=0;i<all.size();i++ ) {
if( all[i].hasClassName('active') && first == -1 )
first = i;
if( all[i].hasClassName('active') && first != i )
last = i;
if ( all[i] == element){
clicked = i;
}
}
if ( first == clicked && last == -1 ){
all[clicked].removeClassName('active');
return;
}
if ( first == -1 && last == -1 ) {
all[clicked].addClassName('active');
return;
}
if ( last < clicked && first != -1 ){
for (i=first;i<=clicked;i++)
all[i].addClassName('active');
return;
}
if (last == clicked && first != -1 ) {
for (i=first+1;i<=clicked;i++)
all[i].removeClassName('active');
return; }
}
<%end%>
</body>
</html>
答案 3 :(得分：0)
好的，在此期间，在同事的帮助下，我想出了一个自己的答案来解决这个问题：
<script type="text/javascript">
// holds paragraph A (first selected paragraph)
var a_selected = null;
// holds paragraph B (second selected paragraph)
var b_selected = null;
// holds all 'active' paragraphs
var selected_paras = [];
function class_flipper_init() {
// reset paragraphs A and B
a_selected = null;
b_selected = null;
var paragraphs = $$("#foobar p");
paragraphs.each(function(paragraph, index) {
// if user clicks on a paragraph
paragraph.observe("click", function(event) {
// if A and B are 'active': reset everything.
if(b_selected != null) {
selected_paras.each(function(i) {
toggleStyle(i);
})
a_selected = null
b_selected = null
return
}
// if A is 'active'
if(a_selected != null) {
// if A is 'active' and selected B is below A:
// select all paragraphs between A and B
if(a_selected < index) {
b_selected = index;
for (var i = a_selected + 1; i <= index; i++ ) {
toggleStyle(paragraphs[i])
}
}
// if A is 'active' and selected B is above A:
// select all paragraphs between A and B
else if(a_selected > index) {
b_selected = index;
for (var i = a_selected - 1; i >= index; i-- ) {
toggleStyle(paragraphs[i])
}
}
// if A == B
else {
toggleStyle(paragraph)
a_selected = null
}
}
// if A is selected
else {
a_selected = index;
toggleStyle(paragraph)
}
});
});
}
function toggleStyle(paragraph) {
// remove active class
if (paragraph.hasClassName("active")) {
paragraph.removeClassName("active");
selected_paras = selected_paras.without(paragraph)
}
// set active class
else {
paragraph.addClassName("active");
selected_paras.push(paragraph)
}
}
</script>
class_flipper_init()。
请不要犹豫，提交用“纯”RJS或更优雅的东西编写的解决方案。 ： - ）