2013-02-27 2 views
0

я имею HTML как это: уль есть несколько элементов Li, с кнопкой Удалить,хотят показать правильный элемент Li на основе некоторых условий

вопроса: мне нужно, чтобы показать правильный элемент LI с галочкой знаком изображения,

скажем я звоню ShowCheckMarkLi (Описания, клиент)

тогда только 2 литий должен быть дисплей в UL элемент с CheckmarkImage.Ico другой должен быть делись

HTML как это: -

<ul> 
      <li id="liRightDescriptions"> 
       <span> 
        <span>Descriptions</span> 
        <img class="removeImg" src="../Images/RemoveButton.ico" /></span> 
      </li> 
      <li id="liRightSpecialization"> 
       <span><span>Specialization</span><img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" /></span> 
      </li> 
      <li id="liRightOrgChart"> 
       <span>Org Chart</span><img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" /> 
      </li> 
      <li id="liRightClient"><span> 
       <span>Client</span> 
       <img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" /></span></li> 
      <li id="liRightAchievements"><span> 
       <span>Achievements</span> 
       <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li> 
      <li id="liRightMemberships"><span> 
       <span>Memberships</span> 
       <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li> 
      <li id="liRightGetRatings"><span> 
       <span>Get Ratings</span> 
       <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li> 
      <li id="liRightSkills"><span> 
       <span>Skills</span> 
       <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li> 
     </ul> 

Я пытаюсь так:

function ShowRightCheckMarkButton(Descriptions, Skills, Client, Achievements, Memberships, OrgChart, Specialization,GetRatings) { 
      $('.divright').css("visibility", "visible"); 
      $('#listProjectRelated').empty(); 
      if (Achievements) { 
       $('#listProjectRelated').append("<li id='liRightAchievements'><span><span>Achievements</span><img class='checkImg' src='../Images/Checkmark.ico'/></span></li>") 
      } 
      else 
      { 
       $('#listProjectRelated').append("<li id='liRightAchievements'><span><span>Achievements</span><img class='removeImg' src='../Images/RemoveButton.ico'/></span></li>") 
      } 
. 
. 
. 
. 
. 
. 

    } 
+0

Что JQuery код вы пробовали? – mbeckish

+0

Да, я отредактировал мой вопрос –

+0

Ваш jquery содержит класс (.divright) и id (#listProjectRelated), которых нет в вашем HTML. – mbeckish

ответ

0

Ваша функция ссылки идентификатор 'listProjectRelated' в строке:

$('#listProjectRelated').empty(); 

это должно быть идентификатор уль элемента? Таким образом, первая строка вашего HTML должна быть

<ul id="listProjectRelated"> 
+0

ОК, спасибо, не проблема :) –

0

Есть решение для вас here. Одна из проблем, связанных с описанием желаемой функции, заключается в том, что вы передаете имена переменных - я предполагаю, что они предназначены для строк.

В псевдо-коде, что вы пытаетесь достичь (я думаю):

  1. захватить все лис.
  2. Для каждого из них см., Соответствует ли его текст любому из аргументов («Клиент», «Описания»):
  3. Если это так, измените изображение в литии, чтобы отобразить значок, который вы упомянули (и убедитесь, что изображение).
  4. Если нет, удалите li из списка.

Код для функции вы хотите позвонить бы так:

function ShowCheckMarkLi(){ 
    // Get all the lis 
    var lis = document.getElementsByTagName('li'); 

    // Loop through them... 
    for(var i = 0, l = lis.length; i < l; ++i){ 
     // And, for each, loop through the arguments 
     for(var j = 0, m = arguments.length; j < m; ++j){ 
      // If the argument string is found in the li's text... 
      if(lis[i].innerText.match(arguments[j])){ 
       // ...Find the image 
       var img = lis[i].getElementsByTagName('img')[0] 
       // ...Change its src attribute to replace all the text after the last slash with your filename 
       img.src.replace(/[^\/]+$/, 'CheckmarkImage.Ico'); 
       // ...And make sure it's displayed. 
       img.style.display = 'inline-block'; 
      } 
      // Otherwise... 
      else { 
       // ...Remove it! 
       lis[i].parentNode.removeChild(lis[i]); 
      } 
     } 
    } 
} 

// Call your function with strings 
ShowCheckMarkLi('Descriptions','Client'); 
0

Демо: http://jsfiddle.net/8YXDJ/

function ShowLi(val) { 
     $("#_ul li").css('display','none'); 
     $(val).each(function() { 
      var t = String(this); 
      $("#_ul li span").filter(function() { 
       return (jQuery.trim($(this).text()) == t); 
      }).parent().css('display',''); 
     }); 
    } 
ShowLi([ "Descriptions","Specialization","Skills" ]) 
Смежные вопросы