我怎樣才能把我的箭頭旁邊的標題切換仍然工作？

Question

我喜歡在我的headertext旁邊放置我的箭頭（我點擊了它）。
我試圖將箭頭<div>放入H1標籤，但切換不起作用。
有人可以幫我嗎？
我更喜歡你的編輯段添加到您的答案

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

.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>

Answer 1

要做到這一點，你需要做的div和h1display: inine-block，使他們能夠坐在一起彼此。您還可以移動a元素中的div。最後，您需要修改jQuery以使用find()而不是next()。試試這個：

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

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'); 
 
}

<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>

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>

希望這有助於！