Question

我希望在启动网页时使用JQuery隐藏文字，当您点击某个项目时，它会显示隐藏文字。

当我加载页面时，它显示h2中的文本和h3中的文本，并按预期将文本隐藏在ptdeats中。当我点击包含＆＃34; Jason O＆＃39; Reilly＆＃34;的文字时，它没有显示文字＆＃34;你好，我的名字是Jay ......＆＃34 ;

课程培训师ptpics，pt，center在css中配置。

jquery也配置为突出显示h3，当h3单击时显示文本，当你点击h3时它再次隐藏它。

这是我在html中配置的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="trainersptjavascript.js"></script>
</head>
<body>
    <div class="trainers">
            <h2 class="center">Choose your Personal Trainer</h2>
            <div class="ptpics center">
                <h3 class="pt center">Jason O'Reilly</h3>
                <p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
                <p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
            </div>
            <div class="ptpics center">
                <h3 class="pt center">Jean Meehan</h3>
                <p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
                <p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
            </div>
            <div class="ptpics center">
                <h3 class="pt center">Aoife McIntyre</h3>
                <p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
                <p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
            </div>
    </div>
</body>
</html>

这是css配置

.trainers
    {
    width: 80%;
    background-color: #36454F;
    color: #FFFFFF;
    text-align: justify;
    height: auto;
    margin-left: 10%;
    margin-left: 10%;
    padding-left: 6px;
    padding-right: 6px;
    float: left;
    }

.pt
    {
    width: 100%;
    cursor: pointer;
    color: #FFFFFF;
    padding-left: 6px;
    padding-right: 6px;
    float: left;
    }

.ptpics
    {
    width: 33%;
    background-color: #36454F;
    color: #FFFFFF;
    border: 1px;
    border-color:#009900;
    text-align: justify;
    height: auto;
    float: left;
    padding-left: 6px;
    padding-right: 6px;
    }

JQuery配置：

$(document).ready(function()
{
$(".me").hide();
$(".pt").click(function(){
$(".me").show();
});
});

Answer 1

事件触发的元素可能存在问题。尝试：

$(".ptpic").click(function(){
$(".me").show();
});

如果可行，那么您可能无法点击正确的位置。

Answer 2

您的代码应该有效。我测试了它，它确实有效。

确保关闭html标签：

<div class="ptpic center">
<h3 class="pt center">My Name</h3>
<p class="center"><img src="images/me.jpg" alt="Me" width="320" height="350"></p>
<p class="me">Hi there</p>

确保点击显示“我的名字”的实际文字，因为如果你只是点击它，它可能不完全有效。测试它的一个好方法是通过CSS在目标对象（这里是h3或.pt）上放置背景颜色。然后，点击该框内的任何位置应该没问题！

如果你想让文字切换隐藏和显示，那么在你的javascript中执行此操作：

$(document).ready(function(){
    $(".me").hide();
    $(".pt").click(function(){
        $(".me").toggle();
    });
});

每次在.pt区块上小鸡时，这将在显示和隐藏之间切换。

希望这有帮助！

Answer 3

好的，所以我复制并粘贴了你的代码并进行了一些更改！这些变化应该解决它们。如果他们有效，请告诉我。

HTML：

<!--Here I ONLY added the id's into each h3 elements. They should not cause any damage to the code. I will tell you why at the end. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="trainersptjavascript.js"></script>
</head>
<body>
    <div class="trainers">
            <h2 class="center">Choose your Personal Trainer</h2>
            <div class="ptpics center">
                <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>
                <p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
                <p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
            </div>
            <div class="ptpics center">
                <h3 class="pt center" id="h3_2">Jean Meehan</h3>
                <p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
                <p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
            </div>
            <div class="ptpics center">
                <h3 class="pt center" id="h3_3">Aoife McIntyre</h3>
                <p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
                <p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
            </div>
    </div>
</body>
</html>

JAVASCRIPT：

//I simply modified the classes to put what you wanted it to do. I guess this was simply a class issue then? Because everything seems alright except that. 
$(document).ready(function(){
    $(".ptdeats").hide();
    $(".pt").click(function(){
        $(".ptdeats").show();
    });
});

JAVASCRIPT，建议：

//This should work better because you want the user to be able to remove that new added text if they want to. Just a minor suggestion. Toggle makes a hidden object to show and a shown object to hide.
$(document).ready(function(){
    $(".ptdeats").hide();
    $(".pt").click(function(){
        $(".ptdeats").toggle();
    });
});

JAVASCRIPT，ADIDUP WITH ID'S，也建议：

//This is where the ID's come into play. 
$(document).ready(function(){
    $(".ptdeats").hide();
    // console.log(this);
    $(".pt").click(function(){
        $("#"+this.id).next().next().toggle();
    });
});

说明：当您单击“.pt”时，两个第一个Javascript将显示所有“.ptdeats”中的所有文本，因为您告诉JS显示“.ptdeats”。将显示该类的任何HTML。

然而，在JS中有一个很酷的技巧，你可以找到你点击的特定元素的任何特定属性。此外，如果您不熟悉“this”，“this”基本上指的是您所在的元素。例如，如果您单击<h3 class="pt center" id="h3_1">Jason O'Reilly</h3>，即使您在JS上使用“.pt”指定它，“this”也会指向<h3 class="pt center" id="h3_1">Jason O'Reilly</h3>。尝试取消注释// console.log(this);并检查您的网络控制台，看看我的意思。

最后，jQuery中的.next()指定了下一个元素。在这里它只是因为你的HTML结构。第一个.next()是p标记，其中包含图像，第二个是您实际要切换的文本。这样更好，因为它会切换特定于您点击的人的文本！

如果有效，请告诉我。我相信它会：我复制并粘贴你给的东西，只做了很小的改动。我还在四种不同的浏览器上测试过它：Opera，Mozilla，Chrome和Safari。我没有IE，所以我不确定它会如何表现，但这并不是太复杂，所以它应该按预期工作。

使用JQuery隐藏和显示文本

3 个答案: