0

クリックすると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>
4

2 に答える 2

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

およびDIVのクラスではなく、otherClassesstringに設定するだけです。ただし、他のクラスを確認する必要はまったくありません。必要なクラスを設定するだけです。'photos.className'basicsphotos

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 に答える