1

网址：http ://adamginther.com

我试图在按下图像“DragonUp”时验证 div 并检查该值是否为空。如果它是空的，那么它将在该 div 中附加一个段落和图像，如果它确实有文本，那么它将清空该 div。这不起作用，验证是正确的方法吗？

<div id="description"></div>
<p id="checkOut">
You should check out some of my work
</p>
</div>
<section id="portfoliopics">
<p>Information Architecture</p>
<img src="images/dragonup.png" id="dragonup" alt="DragonUp">
<img src="images/province.jpg" id="provincesports" alt="The Province Sports">
<img src="images/ayogo.jpg" id="ayogo" alt="ayogo">
<p>Design</p>
<img src="images/rebellious.png" alt="Rebellious by Nav" id="rebellious">
<img src="images/attack.png" alt="Attack of the Space Leprechauns">
<p>Development</p>
<img src="images/form.png" alt="Form Design" id="formdesign">
<img src="images/imageswap.png" alt="Image Swap">
<img src="images/popup.png" alt="Pop-up Window">
<img src="images/learningios.png" alt="Learning iOS Development" id="learningios">
<p>More Stuff</p>
<img src="images/canucks.jpg" alt="canucks">
<img src="images/saveinte.png" alt="Save Interactive Design">
</section>

$(document).ready(function() {
    $("#dragonup").click(function() {
        $('#description').val();
        if ('#description' === '') {
        $('#description').empty();
        $("#description").prepend('<p><class id="blueText">You are viewing: DragonUp Wireframes </class><br> Role: User Experience Design<br><br>DragonUp is a game created by East Side Games for iOS and it is currently being ported over to Facebook. It is a game that draws inspiration from Dragonvale and Tiny Tower and has players building up a collection of dragons. Kotaku describes it as A dragon vomit harvesting game, and that makes all the difference.<br><br>I was tasked with proposing a re-design of its UI. Currently, the game has 10 different options in the menu. With this in mind, my goal was to create a more streamlined menu for new users and more fluid navigation for experienced players. I was able to achieve this and accomplished having four different options in the menu while still containing the same functionality and increasing usability.</p>');
                $("#description").append('<img src="images/work/dragonup-wireframe1.png">');
                $("#beforeClick").remove();
                $('#checkOut').empty();
                $('#checkOut').append('You should also check out:');
            }
            else {
                $('#description').empty();
            }
    })
})
4

3 回答 3

1

您正在针对错误的东西进行测试-您的代码if ('#description' === '')永远不会验证，您需要将其更改为if ($('#description').text() === '')

于 2013-05-24T14:08:45.687 回答
0

它应该是：

$('#description').html();

.val()用于输入

于 2013-05-24T14:08:16.357 回答
0 
if ('#description' === '') { ... }

这比较了两个明显不相等的文字字符串，因此总是给出false结果。您需要检索#description元素并检索有关它的一些信息。

有很多方法可以解决这个问题：

  • if ($('#description').html() === '') { ... }
    #description如果元素的 HTML 内容为空，这将匹配。文本节点和注释被保留。
  • if ($('#description').text() === '') { ... }
    #description如果元素的文本内容为空，这将匹配。（文本内容是它的“平面”内容，例如，HTML 标记被剥离。）注释被丢弃。
  • if ($('#description').children().length === 0) { ... }
    如果#description元素没有子元素，这将匹配。不考虑文本节点和注释，即<div id="description">Foo <!-- Bar --></div>按照这种方法没有子节点。

如果您知道您只需要担心实际的子节点（例如<img>标签），.children().length这可能是最简单的选择。否则，您必须先查看实际的文本内容，并可能.trim()在检查其是否为空之前查看它：

if ($('#description').text().trim() === '') { ... }

或等效地：

if ($('#description').text().trim().length === 0) { ... }
于 2013-05-24T14:14:13.453 回答