我对 JavaScript 非常陌生，如果这真的很愚蠢，我深表歉意。 基本上问题是我有 2 个 JavaScript，都使用 ul 和 li 标签，但都需要它来做不同的事情，那么我如何将它应用于不同的 ul 和 li 标签？
这个问题比较详细
我有两个 JavaScript。
(1)
<script src="js/jquery.roundabout2.js"></script>
<script src="js/jquery.roundabout-shapes2.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
$(document).ready(function() {
$('.verb ul li').focus(function() {
$('#hidden-verb').val($(this).text());
});
$('.feeling ul li').focus(function() {
$('#hidden-feeling').val($(this).text());
});
$('.adjective ul li').focus(function() {
$('#hidden-adjective').val($(this).text());
});
$('ul').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('li').dblclick(function(e) {
e.preventDefault();
return false;
});
$('form').submit(function(e) {
e.preventDefault();
alert('Thank you for telling me that my art work is ' + $('#hidden-adjective').val() + ' ,and to improve it I should add ' + $('#hidden-verb').val() + ' and the website is ' + $('#hidden-feeling').val() + '.');
return false;
});
});
</script>'
然后 (2)
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>'
1号来自http://fredhq.com/projects/roundabout/demos/form和这里的第 2 个 http://www.twospy.com/galleriffic/example-2.html
现在您可以看到两者都使用 ul 和 li，但是 (1) 需要它用于它的目的而 (2) 需要它用于它的目的，但我无法让它对两者应用不同的东西。如果您查看链接，您会看到不同的目的。我试图将 id 添加到标签和类中，但它似乎不起作用。
任何帮助将不胜感激。
谢谢
这是应用它的两段 HTML。
(1)
<div id="tellmeform"><form id="form2" action="" method="get">
<div class="part"> My art work is</div>
<div class="part moving adjective">
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul1">
<li class="li1" id="li1">tones</li>
<li class="li1" id="li1">colour</li>
<li class="li1" id="li1">shadows</li>
<li class="li1" id="li1">faces</li>
<li class="li1" id="li1">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul1">
<li class="li1" id="li1">clean</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">poor</li>
<li class="li1" id="li1"i>smooth</li>
<li class="li1" id="li1">expired</li>
</ul>
</div>
<div class="part">.</div>
<div class="part button">
<input type="hidden" id="hidden-adjective" name="hidden-adjective" value="" />
<input type="hidden" id="hidden-verb" name="hidden-verb" value="" />
<input type="hidden" id="hidden-feeling" name="hidden-feeling" value="" />
<input type="submit" value="Tell Me" name="post" id="post-it" />
</div></form></div>'
和数字 (2) - 很长，抱歉。
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul id="ul2" class="thumbs noscript">
<li id="li2">
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #4</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #5</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #6</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
</div>
<div class="image-title">Title #7</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #8</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #9</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #10</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #11</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #12</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #13</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #14</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
<img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #15</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
<img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #16</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
<img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #17</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
<img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #18</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
<img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #19</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
<img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #20</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
<img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #21</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
<img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
<img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
</a>
<div class="caption">
<div class="download">
<a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
</div>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>'
您可以看到我尝试添加类和 ID，但当我说它似乎不起作用时，我的意思是它只将设置应用于一个。例如，在代码 1 上将其保留为 ul 和 li，代码 1 起作用，然后代码 2 失败，并以与代码 1 相同的方式出现。但是如果我将代码 1 设置为 ul1 和 li1，则 1 不起作用，而 2 起作用。 抱歉，如果这有点令人困惑。但基本上我无法让他们独立工作。
最佳答案
抱歉，我想将其添加为评论，但没有这个选项。看起来您需要将类添加到脚本本身以使每个脚本与正确的 ul 和 li 相关，或者您是否希望这两个脚本都适用于所有 ul 和 li s?
好的，我想我明白了，尝试更改以下内容:
$('#ul1, #ul3, #ul4').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('#li1, #li3, #li4').dblclick(function(e) {
e.preventDefault();
return false;
});
并将 waterWheel 位的 div 结构更改为:
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul3">
<li class="li1" id="li3">tones</li>
<li class="li1" id="li3">colour</li>
<li class="li1" id="li3">shadows</li>
<li class="li1" id="li3">faces</li>
<li class="li1" id="li3">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul4">
<li class="li1" id="li4">clean</li>
<li class="li1" id="li4">stunning</li>
<li class="li1" id="li4">poor</li>
<li class="li1" id="li4"i>smooth</li>
<li class="li1" id="li4">expired</li>
</ul>`
关于javascript - 应用于不同 <ul> 和 <li> 标签的多个 Java 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11247390/