Question

我正在努力使用JavaScript点击特色图片：

<div class="post-wrapper">
  <section class="post-image">
    <img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.example.com/wp-content/uploads/example.jpg">
    <div class="image-shadow"></div>
  </section>
  <div class="post-container">
    <div class="container">
      <section class="post-title" style="color:;">
        <h2 class="post-heading"><a href=
                    "http://www.example.com/category/example/">Band &#8211;
                    Targ3t</a></h2>
                    <ul class="post-info"></ul>
      </section>
    </div>
  </div>
</div>

有谁知道如何将<a>添加到<img>代码？

Answer 1

假设您只是意味着图片应该将用户链接到单独的页面，以下是您进行此调整的方式。您所做的只是将元素包装在a标记中，如下所示：

<div class="post-wrapper">
  <section class="post-image">
    <a href="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"><img alt="Targ3t Band" class="img-responsive" src="http://i2.wp.com/www.djentmag.com/wp-content/uploads/TARG3T-2016-A-e1464397193853.jpg?resize=1400%2C600"></a>
    <div class="image-shadow"></div>
  </section>
  <div class="post-container">
    <div class="container">
      <section class="post-title" style="color:;">
        <h2 class="post-heading"><a href=
                    "http://www.djentmag.com/artist/targ3t/">Band &#8211;
                    Targ3t</a></h2>
        <div class="post-sub-title">
          <p>Deathcore, Hardcore - Romania</p>
        </div>
        <ul class="post-info"></ul>
      </section>
    </div>
  </div>
</div>

使用Wordpress，您可能希望将动态值添加到img网址。如果是这种情况，或者如果这不能完全解决问题，请提供其他信息。

Answer 2

您需要为img标记添加id属性。（id =“image1”）在这种情况下。然后，您需要创建一个Javascript函数，单击图像时将调用该函数。

以下代码将在加载页面时运行函数starter，并在单击图像时单击该函数。

<script>
var image;
function clicked() {
    alert("Image clicked");
    }
function starter() {
    image = document.getElementById("image1");
    image.onclick = clicked;
    }    
window.onload = starter;
</script>

Answer 3

正如我上面提到的，我找到了编写代码的PHP脚本，并使用<a>标记包装了图像，该标记具有get_post_permalink()，这做得非常好。使用String locator在我的主题中找到编译这些元素的.php文件。

使特色图像可点击Wordpress

3 个答案: