0

嗨,我显示带有 ajax 返回结果的框,其中包含 1 到 4 个列表元素

在按下向下箭头时,我正在为下一个列表项设置彩色边框。我尝试使用 '.next()' 。发生的事情是,当我按下箭头时,除了第一个元素之外的所有元素都被突出显示,我无法做到。帮我

$('.input_for_chain_and_target').keyup(function(){data_fr_chain_and_target(this.id);});
$('.input_for_chain_and_target').bind('keydown',controlling_with_nav_keys);



function controlling_with_nav_keys(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode==40){//alert('down');
    $('.target_frnd_content').next().css('border','2px dashed #6698FF');
}
else if(keycode==38){
    $('.target_frnd_content').prev().css('border','2px dashed #6698FF');
}

我试图粘贴它,但由于 php 代码生成 html,它被扭曲了

这是大概的副本

<li style='border:1px solid #F4F3F0;' class='target_frnd_content' id=\"$target_frnd_content_id\">
$usr_img $usr_namex(附加信息)

4

4 回答 4

0

请提供您的 html 代码,next() 绝对应该选择下一个列表项。您是否选择了正确的列表

  • 项目使用它的类名 (.target_frnd_content)?

  • 于 2011-04-16T19:44:16.433 回答
    0

    好的,我明白了。基本上你是通过它的类名“target_frnd_content”来选择项目,我相信你会给其余的项目提供相同的类名,这就是为什么它选择所有下一个项目,因为每个项目都有相同的类名。您必须唯一标识每个列表项,可能通过为每个列表项添加一个 id 属性。你还能做的是这样的:

    <ul class="some_list">
      <li class="current">Item one</li>
      <li>Item two</li>
      <li>Item three</li>
    </ul>
    

    然后在javascript中你会说:

    var current = $('li.current');
    current.removeClass('current').next().addClass('current');
    

    现在您可以在 css 文件中为当前类设置您想要的任何样式,例如:

    li.current{border: 2px dashed #6698FF;}
    
    于 2011-04-16T20:17:20.887 回答
    0

    尝试:

    $('.target_frnd_content').next().css({'border-width','2px', 'border-style': 'dashed', 'border-color': '#6698FF'});
    
    于 2011-04-16T20:17:50.417 回答
    0

    好吧,我想这是问题所在:

    $('.target_frnd_content').next().css('border','2px dashed #6698FF');
    

    它应该是:

    $('.target_frnd_content').next().css({'border':'2px dashed #6698FF'});
    

    请记住,在添加任何样式时,您必须将 JSON 对象传递给 css() 方法。希望有帮助。

    于 2011-04-16T19:57:42.340 回答