2016-10-13 4 views
0

HTML кодвызвать clickevent в случае щелчка

<ul id="linkjess"> 
    <li><a href="javascript:setfolder('medewerkers', '1000');">medewerkers 1000</a></li> 
    <li><a href="javascript:setfolder('medewerkers', '1001');">medewerkers 1001</a></li> 
    <li><a href="javascript:setfolder('medewerkers', '2001');">medewerkers 2001</a></li> 
    <li><a href="javascript:setfolder('kantoren', '101');">Kantoor 101</a></li> 
</ul> 

Сценарий:

<script> 
    function setfolder(type, id) 
    { 
      $(".folder-box").each(function(index, element) { 
      if ($(element).find(".item-title").html() == type) 
       { 
        $(element).find("img").trigger("click") 
       } 
      }) 
    } 
</script> 

если я нажимаю на якорь тег, имеющий текст medewerker 1000 он идет в medewerker папку Как я могу убедиться, он должен перейти к medewerker> 1000?

EDIT:

я 3 папки с именем (пример) аЬ и medewerkers

medewerkers имеет 3 папки в нем (вложенные папки) 1000 1001 1002

если я нажмите на ссылку (medewerker 1000) он идет внутри карты medewerkers то, что я хочу, он должен пойти в medewerkers и в папке 1000.

EDIT:

{ 
      $(".folder-box").each(function(index, element) { 
      if ($(element).find(".item-title").html() == type) 
       { 
        $(element).find("img").trigger("click") 
       } 
        if ($(element).find(".item-title").html() == id) 
        { 
        $(element).find("img").trigger("click") 
        } 
      }) 
    } 

Если я использую это, я должен дважды щелкнуть по той же ссылке, чтобы делать то, что я хочу.

мой вопрос, как я могу сделать это не 2 х нажмите но когда

+0

Не можете ли вы просто проверить (id> 1000)? – Mayday

+0

Где ваши 'элементы', как использовать' .item-title'? –

+0

Пожалуйста, добавьте html для элементов .folder-box, чтобы увидеть, как они структурированы. –

ответ

0

Предполагая, что ваши вложенные папки названы только с идентификатором (1000, 1001, 101) вы могли бы попробовать что-то вроде этого:

<script> 
    function setfolder(type, id) 
    { 
      $(".folder-box").each(function(index, element) { 
      if ($(element).find(".item-title").html() == type) 
      { 
       $(element).find("img").trigger("click"); 
       var subFolder = $(element).find(".item-title"); 

       if ($(subFolder).find(".item-title").html() == id) 
        $(subFolder).find("img").trigger("click"); 
       } 
      } 
      }) 
    } 
</script> 

UPDATE: вы работать может выглядеть следующим образом:

function setfolder(type, id) { 

    $(".folder-box").find(".item-title:contains(" + type + ")").find(".item-title:contains(" + id + ")").find("img").trigger("click"); 
} 

Я создал структуру html на основе вашей ссылки. Если ваш результат отличается, вам нужно настроить сценарий на свои нужды.

CSS

<style> 
.folder-box { 
    float:left; 
    font-family:Arial; 
    width:150px; 
    height:150px; 
    text-align:center; 
    padding:10px; 
    margin:10px 0; 
    border:solid 1px #edeae9; 
    -webkit-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.75); 
    -moz-box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.75); 
    box-shadow: 7px 9px 5px -6px rgba(0,0,0,0.75); 
    border-radius:5px; 
} 


.item-title img{ 
    max-width:15%; 
    cursor:pointer; 
    border: thin solid green; 
} 

.item-title { 
    padding:5px 0px 0px 5px; 
    word-wrap: break-word; 
    width:150px; 
    text-align:left; 
    font-size:11px; 
} 
</style> 

HTML

<ul id="linkjess"> 
    <li><a href="javascript:setfolder('Medewerkers', '1000');">medewerkers 1000</a></li> 
    <li><a href="javascript:setfolder('Medewerkers', '1001');">medewerkers 1001</a></li> 
    <li><a href="javascript:setfolder('Medewerkers', '1002');">medewerkers 1002</a></li> 
    <li><a href="javascript:setfolder('Kantoor', '101');">Kantoor 101</a></li> 
</ul> 


<div class="folder-box"> 
    <div class="item-title"><img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />Medewerkers 
    <div class="item-title"> 
     <img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />1000</div> 
    <div class="item-title"> 
     <img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />1001</div> 
    <div class="item-title"> 
     <img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />1002</div> 
    </div> 

<div class="item-title"><img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />Kantoor 
    <div class="item-title"> 
     <img src="http://www.freeiconspng.com/uploads/education-folder-icon-15.jpg" alt="folder" />101</div> 
</div> 

</div> 

JS

<script> 
function setfolder(type, id) { 

    $(".folder-box").find(".item-title:contains(" + type + ")").find(".item-title:contains(" + id + ")").find("img").trigger("click"); 
} 

$("img").on("click", function() { 
    $(this).css('border','thin solid red'); 
}); 
</script> 

Здесь рабочий sample.

+0

это не работает –

+0

Возможно, вам понадобится первый щелчок, чтобы развернуть родительскую папку, а затем выберите подпапку. Решает вашу проблему? Я обновил свой ответ. –

+0

он должен щелкнуть подпапку 1000 aswel –

0

Попробуйте это: -

<script> 
     function setfolder(type, id) 
     { 
      if(id > 1000) 
      { 
       $(".folder-box").each(function(index, element) { 
       if ($(element).find(".item-title").html() == type) 
        { 
         $(element).find("img").trigger("click") 
        } 
       }) 

      } 
     } 
    </script> 
+0

1000 - это просто «имя» папки может быть 1 или 1000000 или даже абс –

Смежные вопросы