Question

我有一段代码，它将突出显示效果应用于菜单中的列表项（由于菜单项只是POST），以便为用户提供反馈。我已经创建了菜单的第二步，并希望将它应用于任何具有.highlight类的元素。不能让它工作，这是我目前的代码：

[删除旧代码]

显而易见的解决方法是创建一个新的ID（例如，'＃highlighter2），然后复制并粘贴代码。但我很好奇是否有更有效的方法将效果应用于类而不是ID？

更新（这是我的更新代码）：

上面的脚本可以处理第一个ul。第二个ul，通过jquery出现（也许这就是问题，它最初设置为隐藏）。这是相关的HTML（有很多东西要理解，但请注意隐藏的第二个div。我认为这可能是罪魁祸首。就像我说的，第一个列表完美无缺，突出显示所有。但是第二个列表什么也没做。）？

//Do something when the DOM is ready:

<script type="text/javascript">
$(document).ready(function() {

$('#foo li, #foo2 li').click(function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

//When a link in div is clicked, do something:
$('#selectCompany a').click(function() {
    //Fade in second box:

    //Get id from clicked link:
    var id = $(this).attr('id');


    $.ajax({
        type: 'POST',
        url: 'getFileInfo.php',
        data: {'id': id},
        success: function(msg){
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#selectCompanyUser').html(msg)
            $('#selectCompanyUser').fadeIn(400);
        }
});
    });
});
</script>
<div id="selectCompany" class="panelNormal">
<ul id="foo">
<?
// see if any rows were returned 
if (mysql_num_rows($membersresult) > 0) { 
    // yes 
    // print them one after another 
    while($row  = mysql_fetch_object($membersresult)) { 
        echo "<li>"."<a href=\"#\""." id=\"".$row->company."\">".$row->company."</a>"."</li>";
    }  
} 
else { 
    // no 
    // print status message 
    echo "No rows found!"; 
} 

// free result set memory 
mysql_free_result($membersresult); 

// close connection 
mysql_close($link); 
 ?>

  </ul>
</div>


<!-- Second Box: initially hidden with CSS "display: none;" -->

<div id="selectCompanyUser" class="panelNormal" style="display: none;">
<div class="splitter"></div>

</div>

Answer 1

你可以创建#highlighter2并使你的代码块成为一个获取ID值的函数，然后只调用它两次：

function hookupHighlight(id) {
    var context = document.getElementById(id);
    var items = context.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function() {
            // do AJAX stuff

            // remove the "highlight" class from all list items
            for (var j = 0; j < items.length; j++) {
                var classname = items[j].className;
                items[j].className = classname.replace(/\bhighlight\b/i, '');
            }

            // set the "highlight" class on the clicked item
            this.className += ' highlight';
        }, false);
    }
}

hookupHighlight("highliter1");
hookupHighlight("highliter2");

jQuery会在很多方面使这更容易，因为整个块会崩溃到这个：

$("#highlighter1 li, #highlighter2 li").click(function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

如果在运行此jQuery代码时最初不存在要单击的任何对象，则必须使用此代码：

$("#highlighter1 li, #highlighter2 li").live("click", function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

Answer 2

更改/highlight/ig中的替换，它适用于http://jsfiddle.net/8RArn/

var context = document.getElementById('highlighter');
var items = context.getElementsByTagName('li');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        // do AJAX stuff

        // remove the "highlight" class from all list items
        for (var j = 0; j < items.length; j++) {
            var classname = items[j].className;
            items[j].className = classname.replace(/highlight/ig, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
    }, false);
}

Answer 3

因此所有那些只是使用jQuery的人都在发出错误的建议。它现在可能是一个快速修复，但它无法替代实际学习Javascript。

Javascript中有一个非常强大的功能叫做闭包，可以快速解决这个问题：

var addTheListeners = function (its) {
    var itemPtr;

    var listener = function () {
        // do AJAX stuff

        // just need to visit one item now
        if (itemPtr) {
            var classname = itemPtr.className;
            itemPtr.className = classname.replace(/\bhighlight\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
        itemPtr = this;
    }

    for (var i = 0; i < its.length; i++) {
        its[i].addEventListener ('click', listener, false);
    }
}

然后：

var context = document.getElementById ('highlighter');
var items = context.getElementsByTagName ('li');
addTheListeners (items);

您可以根据需要多次调用为不同的doc元素集添加侦听器。

addTheListeners的工作方式是定义一个var，以便在每次调用时存储列表的当前所选项目，然后在下面定义的所有侦听器函数都具有对此变量的共享访问权限，即使在返回addTheListeners之后（这是闭包部分）。

此代码也比您的代码更有效，原因有两个：

您不再遍历所有项目只是为了从其中一个中删除一个类
你没有在for循环中定义函数（你不应该这样做，不仅仅是出于效率的原因，但有一天你会被诱惑使用那个i变量，它会导致你出现一些问题，因为我上面提到的关闭事项）

AJAX：将效果应用于CSS类

3 个答案: