Question

我喜欢在我的headertext旁边放置我的箭头（我在点击时切换）我试图将箭头<div>放入H1标签，但切换不起作用。
有人能帮帮我吗？我希望您将已编辑的代码段添加到答案中

＆＃13;

$('a[id^="module-tab-"]').click(function() {
  $(this).next('.hi').toggleClass("left-image right-image");
});

＆＃13;

.left-image {
  background-image: url('http://i.stack.imgur.com/euD9p.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}
.right-image {
  background-image: url('http://i.stack.imgur.com/dzs9m.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<table>
  <tr style='background-color: lightgray; min-height: 200px;'>
    <td colspan='10'>
      <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a>
      <div class='left-image hi'></div>
    </td>
  </tr>
</table>

＆＃13;

Answer 1

要实现这一目标，您需要制作div和h1 display: inine-block，以便他们可以坐在一起。您还可以在div元素内移动a。最后，您需要修改jQuery以使用find()而不是next()。试试这个：

＆＃13;

$('a[id^="module-tab-"]').click(function() {
  $(this).find('.hi').toggleClass("left-image right-image");
});

＆＃13;

h1 {
  display: inline-block;
}
div.hi {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  display: inline-block;
}
.left-image {
  background-image: url('http://i.stack.imgur.com/euD9p.png');
}
.right-image {
  background-image: url('http://i.stack.imgur.com/dzs9m.png');
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<table>
  <tr style='background-color: lightgray; min-height: 200px;'>
    <td colspan='10'>
      <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'>
        <h1 style='margin-bottom: 0px;'>Gearchiveerde Storingen</h1>
        <div class='left-image hi'></div>
      </a>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

让您的#module-tab-1和.left-image.hi显示inline-block。像：

#module-tab-1 {
  display: inline-block;
}

.left-image.hi {
  display: inline-block;
}

请看下面的代码段：

$('a[id^="module-tab-"]').click(function() {
  $(this).next('.hi').toggleClass("left-image right-image");
});

#module-tab-1 {
  display: inline-block;
}

.left-image.hi {
  display: inline-block;
}

.left-image {
  background-image: url('http://i.stack.imgur.com/euD9p.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}
.right-image {
  background-image: url('http://i.stack.imgur.com/dzs9m.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<table>
  <tr style='background-color: lightgray; min-height: 200px;'>
    <td colspan='10'>
      <a href='#' id='module-tab-1' class='toggler' data-prod-cat='1'><h1 style='margin-bottom: 0px;'> Gearchiveerde Storingen </h1></a>
      <div class='left-image hi'></div>
    </td>
  </tr>
</table>

希望这有帮助！

如何在切换器仍然有效的情况下将我的箭头放在标题旁边？

2 个答案: