Question

所以，我有以下td元素，里面有很多其他元素：

<td height="43" style="border-bottom:2px solid #2b2b2b;" id="arrow2" >  
<label for="pontoart">Ponto de Articula&ccedil;&atilde;o:</label>
<input type="text" name="pontoart" id="pontoart" value="" required>
<a href="#" id="openbox2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('+2','','botao de + com hover 2.png',1)">
<img src="botao de + 2.png" alt="" width="24" height="31" id="+2">
</a>
</td>

我有以下jquery函数。基本上，它会在单击“+”图像时显示隐藏的框。当盒子可见时，我希望它也改变文本以显示一个小的html箭头（代码❬）。

$(document).ready(function(){
    $('#openbox2').click(function(){
        $('#box2').toggle();
        if ($('#box2').is(':visible')) {   
            ?
        }
    });
});

我想在if中添加.text("❬")。问题是，我对选择器中的内容感到困惑。我希望html代码保持不变，最后只有❬。我已经尝试了所有的ID，但没有人给出结果。

<td height="43" style="border-bottom:2px solid #2b2b2b;" id="arrow2" >  
    <label for="pontoart">Ponto de Articula&ccedil;&atilde;o:</label>
    <input type="text" name="pontoart" id="pontoart" value="" required>
    <a href="#" id="openbox2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('+2','','botao de + com hover 2.png',1)">
    <img src="botao de + 2.png" alt="" width="24" height="31" id="+2">
    </a>&#10092;
    </td>

有什么想法吗？非常感谢你！

Answer 1

您可以使用：

$("#arrow2").append("&#10092;");

这会在你的td末尾添加箭头。

Answer 2

如果你希望能够在插入之后删除箭头，你可以在其中创建一个带有html实体的元素的新jQuery对象，而不是仅仅将html实体插入到文档中。删除它。

使用$(this).parent().append(element)将我们的新元素追加到被点击元素的父元素，在这种情况下，它将是<td>元素。
使用jQuery.remove(element)删除我们的新元素而不完全删除它。这意味着我们可以在不创建新jQuery对象的情况下再次创建它。

＆＃13;

var arrow = $('<span>&#10092;</span>');
$(document).ready(function() {
  $('#openbox2').click(function() {
    $('#box2').toggle();
    if ($('#box2').is(':visible')) {
      $(this).parent().append(arrow);
    } else {
      arrow.remove();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td height="43" style="border-bottom:2px solid #2b2b2b;" id="arrow2">
      <label for="pontoart">Ponto de Articula&ccedil;&atilde;o:</label>
      <input type="text" name="pontoart" id="pontoart" value="" required>
      <a href="#" id="openbox2" style="text-decoration: none;">
        <img src="//placehold.it/24x31" alt="" width="24" height="31" id="+2">
      </a>
    </td>
  </tr>
</table>
<div id="box2" style="display:none">Hello foo bar world!</div>

＆＃13;

Answer 3

试试这个

$(document).ready(function(){
    $('#openbox2').click(function(){
        $('#box2').toggle();
        if ($('#box2').is(':visible')) {   
           $(this).closest('td').find('label').append('&#10092;')
        } else {
           $(this).closest('td').find('label')...
        }
    });
});

Answer 4

您可以使用jQuery after method在a代码后面放置。。

$('#openbox2').after('&#10092;');

jQuery用其他元素替换元素的html / text

4 个答案: