Question

我有一个把手模板，其中有多个div，我需要点击它。

然而，在我的div中，文本是动态的，我将如何使整个div可以点击。这是代码

 <div class="row">

    {{#each event}} {{#is this.event ../eventName }}

    <div class="col s12 m3 13 al">
        <div class="card ">
            <div class="card-image">
                <img src="/Small/{{this.imageId}}.JPG">
                <a href="/events/{{this.event}}/imageId/{{this.imageId}}"><span class="imageClick"></span></a>
            </div>
            <div class="card-action sp1">
                <div class="action-time">
                    <a href="/{{this.imageId}}/love" class="like sp">

                        <i class="material-icons fav">favorite</i>

                    </a>
                    <span id="{{this.imageId}}" class="like-text">{{this.love}}</span>

                </div>
                <div class="action-time">
                    <a href="/{{this.imageId}}/laugh" class="haha sp">

                        <i class="material-icons laugh">sentiment_very_satisfied</i>

                    </a>
                    <span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
                </div>
                <div class="action-time">
                    <a href="/{{this.imageId}}/sad" class="downvote sp">
                        <i class="material-icons down">trending_down</i>

                    </a>
                    <span id="{{this.imageId}}sad" class="downvote-text">{{this.sad}}</span>

                </div>
                {{!-- {{this.imageId}} --}}
            </div>

            <div class="card-action">

                <a class="waves-effect waves-light btn share">button</a>

            </div>

        </div>
    </div>

    {{/is}} {{/each}}

我想使用action-time标记中的链接点击我的div a。我尝试使用流行的<span>解决方案like this，但没有用。它适用于最后action-time使前两个不起作用。我怎么能解决这个问题。 action-time和card的Css代码为：

    .action-time{
  display: inline-block;
  border: 1px solid rgba(202, 202, 202, 0.733);
  width: 32%;
  padding-top:2px;
  padding-left: 4px; 
  border-radius:8px; 
}

和卡：

    .card {
  margin: 10px;
  padding: 5px;
  border-radius: 8px; 
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card-action {
  padding: 5px 0px !important;
  /* padding-right: 5px !important; */

}

这是我的网页的样子，我有多张这样的卡片我想让整个区域在心脏可点击的边界，而不仅仅是图像的核心。

Answer 1

您可以更新html，以便<span>位于<a>内。

<a href="/{{this.imageId}}/laugh" class="haha sp">
  <i class="material-icons laugh">sentiment_very_satisfied</i>
  <span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>  
</a>

将<a>显示为块元素会使整个<div>填满。然后你可以将<span>向右漂浮并相应地设置样式，直到它完全符合你想要的位置。

.action-time a {
   display: block;
}

.action-time span {
   float: right;
}

Answer 2

您可以编写一些javascript来处理操作

 $(" .action-time").click(function() {
      window.location = $(this).find("a").attr("href"); 
      return false;
 });

在div中查找“action-time”类的链接。当点击div中的任何位置时，重定向到该链接值。

要使整个div可点击吗？

2 个答案: