javascript - 获取多个 xml 文件？

Question

我正在尝试根据单击的按钮加载多个 xml 文件。

我附上了一段代码，我真的更关注 if...else if。

我想做的事情合乎逻辑或可能吗？

根据 Claudio 建议更新了代码:

    <script src="scripts/jQuery.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<script>
/*********** jQuery Accordion Menu ****************/
$(document).ready(function(){
    $('.btn_countries, .btn_regions').hide();
    $('.mainbar > ul > span ul').each(function(index, element){
        var count = $(element).find('li').length;
            $(element).closest('span').children('a').append(content);
                });

    $('.mainbar > ul > span > a').click(function() {
        var checkElement = $(this).next();
    $('.mainbar span').removeClass('active');
    $(this).closest('span').addClass('active'); 
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
             $(this).closest('span').removeClass('active');
             checkElement.slideUp('normal');
             }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
             $('.mainbar ul ul:visible').slideUp('normal');
             checkElement.slideDown('normal');
             }
        if($(this).closest('span').find('ul').children().length == 0) {
            return true;
        } else {
            return false; 
        }
        });


/*********** jQuery Accordion Menu End****************/

/*********** jQuery load XML ****************/
function xmlFunction( xmlUrl ) {
    $.get( xmlUrl, function ( d ) {
        $( 'body' ).append( '<dl />' );
        $( d ).find( 'company' ).each( function () {

            var $company = $( this ),
                name = $company.attr( "name" ),
                certification = $company.find( 'certification' ).text(),
                employee = $company.find( 'employee' ).text(),
                quote = $company.find( 'quote' ).text(),
                industry = $company.find( 'industry' ).text(),
                signature = $company.find( 'signature' ).text(),
                title = $company.find( 'title' ).text(),
                url = $company.find( 'url' ).text(),
                imageurl = $company.attr( 'imageurl' ),
                html = '';

            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<div class="container">';
            html += '<div class="content">';
            html += '<div class="maincontent">';
            html += '<div class="logoblock">';
            html += '<img class="companyLogo" alt="" src="' + imageurl + '" />';
            html += '</div>';
            html += '<div class="contentblock">';
            html += '<h1 class="name">' + name + '</h1>';
            html += '<h2 class="certification">' + certification + '</h2>';
            html += '<p class="employee">' + employee + '</p>';
            html += '<p class="industry"> ' + industry + '</p>';
            html += '<p class="quote"> ' + quote + '</p>';
            html += '<p class="signature"> ' + signature + '</p>';
            html += '<p class="title"> ' + title + '</p>';
            html += '<a class="url"> ' + url + '</a>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</dd>';

            $('#global').append( $( html ));
        });
        //show after appending all
        $( '#global' ).show();
    });
}

//when dom is ready
    //listener for click on all our buttons
    $( 'button.someCommonClass' ).on( 'click', function ( e ) {
        var $this = $( this );
        e.preventDefault();
        //using return after calling our function, so we don't need to care with so many 'else if'
        //easier to read IMO
        if ( $this.hasClass( 'btn_globalImg' ) ) {
            xmlFunction( 'inc/Global_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_regionalImg' ) ) {
            xmlFunction( 'inc/Regional_BestEmployers.xml' );
            return;
        }
        if ( $this.hasClass( 'btn_countriesImg' ) ) {
            xmlFunction( 'inc/Countries_BestEmployers.xml' );
            return;
        }
    });
});
/*********** jQuery load XML End****************/
</script>

<body>


<div class="mainbar">
  <ul class="btn_container">
   <span><a href='#' class="btn_globalImg"></a></span>
   <span><a href='#' class="btn_regionalImg"></a>
     <ul class="btn_regions">
       <li><a href='#' class="btn_africaImg"></a></li>
       <li><a href='#' class="btn_asiaImg"></a></li>
       <li><a href='#' class="btn_eurImg"></a></li>
       <li><a href='#' class="btn_latinImg"></a></li>
       <li><a href='#' class="btn_northImg"></a></li>
      </ul>
   </span>
   <span><a href='#' class="btn_countriesImg"><span></span></a>
     <ul class="btn_countries">
       <li><a href='#' class="btn_africaImg"></a></li>
       <li><a href='#' class="btn_asiaImg"></a></li>
       <li><a href='#' class="btn_eurImg"></a></li>
       <li><a href='#' class="btn_latinImg"></a></li>
       <li><a href='#' class="btn_northImg"></a></li>
     </ul>
   </span>
</ul>

<div id="global">

</div>
</div>

</body>
</html>

Answer 1

您可以使用hasClass适合您的场景

var $this = $(this);
if($this.hasClass('btn_globalImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
} else if ($this.hasClass('btn_regionalImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
} else if ($this.hasClass('btn_countriesImg')) {
    $.get('inc/Global_BestEmployers.xml', function(d){ ... });
}