0

id=section-name 内のテキストに基づいて、異なるバナー画像を必要とするさまざまなページがあります。Javascript または jQuery を使用して、ページが使用しているセクション名を確認し、CSS クラスをバナー コンテナー ID に追加したいと考えています。

これは SharePoint 2010 サイト用で、マスター ページに追加されます。

各aspxページには次の<div>タグが表示され、セクション名が動的にページに書き込まれます。

<div id="section-name">*Section name goes here*</div>

例えば：<div id="section-name">Toll Stadium</div>

次に<div id="banner-container"></div>、ページのさらに下にタグを付けます。

私がする必要があるのは<div id="banner-container"></div>、セクション名に基づいてクラスを追加することです。

例えば：

  • section-name が Toll Stadium と等しい場合は、class banner-toll - を追加し<div id="banner-container" class="banner-toll"></div>ます。また
  • section-name が Whats On と等しい場合は、class banner-whatson - を追加し<div id="banner-container" class="banner-whatson"></div>ます。また
  • section-name が Christmas Festival の場合、クラス banner-xmas を追加します -<div id="banner-container" class="banner-xmas"></div>
  • などなど

javascriptやjqueryの書き方が全くわかりません。ただし、他の場所でいくつかのコードを見つけました。これまでのところ、次のコードがあります。唯一の問題は、すべてのページでケース 0 クラス (banner-xmas) が使用されていることです。

$(function() {
$('.container')
    .find('#banner-container').each(function(i) {
        switch(i) {
            case 0: 
                $(this).addClass('banner-xmas');
                break;
            case 1: 
                $(this).addClass('banner-whatson');
                break;
            case 2: 
                $(this).addClass('banner-toll');
                break;
            case 3: 
                $(this).addClass('banner-forum');
                break;
            case 4: 
                $(this).addClass('banner-esf');
                break;
            case 5: 
                $(this).addClass('banner-xmas');
                break;
            case 6: 
                $(this).addClass('banner-plan');
                break;
            case 7: 
                $(this).addClass('banner-contact');
                break;
        }
    });

私も次のことを試しましたが、これもうまくいきませんでした：

var objSectionElement = document.getElementById('section-name')
if (objSectionElement != undefined) {
var objSection = objSectionElement.innerHTML.trim();
var objBody = document.body;
if (objSection != undefined && objBody != undefined) {
    if (objSection.startsWith('Default')) {
        objBody.className = objBody.className + " .banner-general";
    }
    else if (objSection.startsWith('What')) {
        objBody.className = objBody.className + " .banner-whatson";
    }
    else if (objSection.startsWith('Toll')) {
        objBody.className = objBody.className + " .banner-toll";
    }
    else if (objSection.startsWith('Forum')) {
        objBody.className = objBody.className + " .banner-forum";
    }
    else if (objSection.startsWith('Endless')) {
        objBody.className = objBody.className + " .banner-esf";
    }
    else if (objSection.startsWith('Christmas')) {
        objBody.className = objBody.className + " .banner-xmas";
    }
    else if (objSection.startsWith('Plan')) {
        objBody.className = objBody.className + " .banner-plan";
    }
    else if (objSection.startsWith('Contact')) {
        objBody.className = objBody.className + " .banner-contact";
    }
}

なにか提案を？

4

3 に答える 3

1

これはサーバーで実行する必要があるようですが、クライアントで実行する必要があります。次のようなものを検討してください。

function addClassBasedOnSection() {
  var classNames = {
    'Default':'banner-general',
    'What':'banner-whatson',
    'Toll':'banner-toll',
    'Forum':'banner-forum',
    'Endless':'banner-esf',
    'Christmas':'banner-xmas',
    'Plan':'banner-plan',
    'Contact':'banner-contact'
  };
  var sectionEl, sectionName, div;
  div = document.getElementById('banner-container');
  sectionEl = document.getElementById('section-name');

  if (sectionEl && div) {
    sectionName = sectionEl.textContent || sectionEl.innerText;
    div.className += ' ' + (classNames[sectionName] || '');
  }
}
于 2012-09-05T00:52:34.913 に答える
1 
$(function(){
    //we pass through a reference to the text within the section name.
    addClassToBanner($('#section-name').text());
});


/*
 * This function needs to be outside of the .ready() scope
 */
function addClassToBanner(txt){
    //avoid assignment issues, create empty variable
    var bannerClass = '';
    switch(txt){
        case 'Toll Stadium':
            bannerClass = 'banner-toll';
            break;
        default:
            bannerClass = 'banner-default';
            break;
    }  
    $('#banner-container').addClass(bannerClass);
}
于 2012-09-05T00:57:20.373 に答える
0

私はこのようなことをします。

<div id="section-name">Toll</div>

$(function(){
    var sectionName = document.getElementById("section-name").innerHTML;
    switch(sectionName) {
        case "xmas":
            $('#banner-container').addClass('banner-xmas');
            break;
        case "whatson":
            $('#banner-container').addClass('banner-whatson');
            break;
        case "toll":
            $('#banner-container').addClass('banner-toll');
            break;
    }

});
于 2012-09-05T00:55:53.073 に答える