通过点击<a> block

时间:2016-12-12 04:02:29

标签: javascript php html

Could you help me with this one please? If you click on my hosting http://www.gosu.cz设置隐藏价值并从左上角选择第一张图片然后它会在页面顶部展开并附加其他信息。

  1. 标题
  2. 描述
  3. 链接
  4. 现在我需要为每个图像设置隐藏值,定义为:

    <li class="item col-xs-12 col-sm-6 col-md-4">
          <a href="http://placehold.it/857x712" data-caption="description">
              <img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
         </a>
    </li>
    

    如果被选中,那么它会出现在这个div的正下方:

    <a href="LINK+KEYWORD">
        <div class="least-preview"></div> 
    </a> 
    

    任何想法我怎么能这样做?我在编程方面的糟糕技能包括一些基本的html,php但不是脚本。

    它的外观如下:http://imgur.com/a/CU30N

    干杯,

    马丁

4 个答案:

答案 0 :(得分:1)

因为David Arce建议可以通过alt值来完成。 我所做的是在开始时使用脚本,并为搜索队列创建链接:

<script>
    $(document).ready(function() {
        $('img').click(function () {
        var alt = $(this).attr("alt")
        var strLink = "link&Key=" + alt;
        document.getElementById("link").setAttribute("href",strLink);
        });
    });
</script>   

感谢document.ElementById ...我能够通过id设置一个href值来生成链接。

<a id="link"> 
        <div class="least-preview"></div> 
</a>

答案 1 :(得分:0)

我不太确定您要隐藏的内容,或者您​​希望代码执行的操作。如果您想隐藏或看到某些内容,可以在css中使用您要隐藏的元素的visibility属性。

/* Hides h2 element */
h2 {
    visibility: hidden;
}

/* Shows h2 element (default value)*/    
h2 {
    visibility: visible;
}

以下是此处的参考资料...... http://www.w3schools.com/cssref/pr_class_visibility.asp

在问题的启示中,你可以为你的图像设置一个onClick =“function()”属性,它将获取你新版本中的任何值,id,类等。可以按变量放入搜索查询。所有这些都可以通过一个功能完成。

答案 2 :(得分:0)

我认为你可以在li标签中使用这样的标签

<input type="hidden" name="Image_details" value="Additional details  offf that image">

然后在img onclick =&#34; getDetails();&#34;

在js:

function getDetails()
{
   div.innerHTML = document.getElementById("Img_details").value;
}

//代码是概念性的,因此我们的想法是将隐藏的输入值分配给单击或选择图像的时间

答案 3 :(得分:0)

$(document).ready(function() {
    $('img').click(function () {
        var alt = $(this).attr("alt")
        var strLink = "link&Key=" + alt;
        document.getElementById("link").setAttribute("href",strLink);
    });
});