Question

我有一段代码允许ajax在点击后运行。单击div后，不仅会运行ajax，而且div会将类从“statusOption”更改为“statusOptionActive”。

到目前为止，它看起来都很好看，但我已经碰壁了。我需要添加一个第3个div，它也会在点击后更改它的类。你也可以在代码中看到我的新div：

我目前正在为2个div工作的JavaScript：

<script>
window.onload = function () {
    var basics = document.getElementById('basics'),
        photos = document.getElementById('photos');

    basics.onclick = function() {
        loadXMLDoc('indexBasics');
        var otherClasses = photos.className;
        if (otherClasses.contains("Active")) {
            basics.className = 'statusOptionActive';
            photos.className = 'statusOption';
        }
    }

    photos.onclick = function() {
        loadXMLDoc('indexPhotos');        
        var otherClasses = basics.className;
        if (otherClasses.contains("Active")) {
            photos.className = 'statusOptionActive';
            basics.className = 'statusOption';
        }
    }

    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
            }
        }

        function get_query()
        {
            var url = location.href;
            var qs = url.substring(url.indexOf('?') + 1).split('&');
            for(var i = 0, result = {}; i < qs.length; i++){
                qs[i] = qs[i].split('=');
                result[qs[i][0]] = decodeURIComponent(qs[i][1]);
            }
            return result;
        }

        xmlhttp.open("GET","../profile/" + pageName + ".php?user=" + get_query()['user'],true);
        xmlhttp.send();
    }
}
</script>

以下是我使用的div，一旦点击并且ajax处于活动状态，类就会发生变化。最后一个div也需要添加到脚本：

<div id="basics" class="statusOptionActive" onclick="loadXMLDoc('indexBasics')">Basics</div>
<div id="photos" class="statusOption" onclick="loadXMLDoc('indexPhotos')">Photos</div>
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Message User</div>

////////////我试图让自己没有运气。这是我的代码////////

<script>
window.onload = function () {
    var basics = document.getElementById('basics'),
        photos = document.getElementById('photos'),
        messages = document.getElementById('messages');

    basics.onclick = function() {
        loadXMLDoc('indexBasics');
        var otherClasses = ('photos.className', 'messages.className');
        if (otherClasses.contains("Active")) {
            basics.className = 'statusOptionActive';
            photos.className = 'statusOption';
            messages.className = 'statusOption';
        }
    }

    photos.onclick = function() {
        loadXMLDoc('indexPhotos');        
        var otherClasses = ('basics.className', 'messages.className');
        if (otherClasses.contains("Active")) {
            photos.className = 'statusOptionActive';
            basics.className = 'statusOption';
            messages.className = 'statusOption';
        }
    }

    messages.onclick = function() {
        loadXMLDoc('indexMessages');        
        var otherClasses = ('basics.className', 'photos.className');
        if (otherClasses.contains("Active")) {
            photos.className = 'statusOption';
            basics.className = 'statusOption';
            messages.className = 'statusOptionActive';
        }
    }


    function loadXMLDoc(pageName)
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
            }
          }

        function get_query(){
          var url = location.href;
          var qs = url.substring(url.indexOf('?') + 1).split('&');
          for(var i = 0, result = {}; i < qs.length; i++){
            qs[i] = qs[i].split('=');
            result[qs[i][0]] = decodeURIComponent(qs[i][1]);
          }
          return result;
        }

        xmlhttp.open("GET","../profile/" + pageName + ".php?user=" + get_query()['user'],true);
        xmlhttp.send();
        }
}
</script>

Answer 1

var basics = document.getElementById('basics'),

是您使用提供的xml

引用按钮的地方

var button3 = document.getElementById('favorites'),

然后你让班级改变魔法发生

button3.onclick = function() {
        loadXMLDoc('indexPhotos');        
        var otherClasses = basics.className;
        if (otherClasses.contains("Active")) {
            photos.className = 'statusOptionActive';
            basics.className = 'statusOption';
        }
    }

有些东西告诉我函数不是你写的^。^

Answer 2

var otherClasses = ('basics.className', 'photos.className');

只需将otherClasses设置为字符串'photos.className'，而不是basics和photos DIV的类。但是你根本不需要检查其他类，只需设置你想要的类。

window.onload = function () {
    var basics = document.getElementById('basics'),
        photos = document.getElementById('photos'),
        messages = document.getElementById('messages');

    basics.onclick = function() {
        loadXMLDoc('indexBasics');
        basics.className = 'statusOptionActive';
        photos.className = 'statusOption';
        messages.className = 'statusOption';
    }

    photos.onclick = function() {
        loadXMLDoc('indexPhotos');        
        photos.className = 'statusOptionActive';
        basics.className = 'statusOption';
        messages.className = 'statusOption';
    }

    messages.onclick = function() {
        loadXMLDoc('indexMessages');        
        photos.className = 'statusOption';
        basics.className = 'statusOption';
        messages.className = 'statusOptionActive';
    }

这是DRY版本：

window.onload = function () {
    var basics = document.getElementById('basics'),
        photos = document.getElementById('photos'),
        messages = document.getElementById('messages');
    var all_divs = [basics, photos, messages];

    function click_handler() {
        var id = this.id;
        var doc = 'index' + id[0].toUpperCase + id.substr(1);
        loadXMLDoc(doc);
        for (var i = 0; i < all_divs.count; i++) {
            if (all_divs[i] != this) {
                all_divs[i].className = 'statusOption';
            }
        }
        this.className = 'statusOptionActive';
    }

    basics.onclick = photos.onclick = messages.onclick = click_handler;

    ...

}

Javascript - 如何扩展此脚本以包含另一个类更改？

2 个答案: