0

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

到目前为止，一切看起来都很好，但我已经碰壁了。我需要添加一个第三个 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>
4

2 回答 2

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';
        }
    }

有人告诉我函数不是你写的^.^

于 2013-08-24T20:48:16.297 回答
1 
var otherClasses = ('basics.className', 'photos.className');

只是设置otherClasses为 string 'photos.className'，而不是basics和photosDIV 的类。但是您根本不需要检查其他类，只需设置您想要的类即可。

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;

    ...

}
于 2013-08-24T21:02:23.073 回答