在点击事件中触发clickevent

时间:2016-10-13 07:12:53

标签: javascript jquery

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', '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&gt; 1000?

编辑:

我有3个文件夹,名为(例子)a b和medewerkers

medewerkers中有3个文件夹(子文件夹)1000 1001 1002

如果我点击链接(medewerker 1000),它会进入地图medewerkers 我想要的是它必须去medewerkers和1000文件夹。

编辑:

  { 
          $(".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次点击而是一次

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

假设您的子文件夹仅以id(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>

更新: 你的功能可能如下所示:

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