如何在单击相应超链接时隐藏/显示qstn的答案，以及如何使用jQuery动态更改此超链接的文本？

debugcn 发表于 Dev

用户名

我正在为我的网站使用PHP，Smarty，jQuery等。在我的网站上，有一个页面，其中包含问题列表以及可用的答案选项和正确答案选项。该页面使用“ Smarty Template Engine”动态生成。因此，此页面可以包含一个或多个问题。为了理解目的，我在这里仅显示两个问题。现在的场景是，标题为“显示答案”下提供了每个问题的可用答案选项。最初，在页面加载时，所有问题的答案选项都应隐藏，并且超链接文本应为“显示答案”。当用户点击特定问题的“显示答案”超链接时，应该向用户显示该问题的可用答案选项和正确答案选项，并且超链接的标题应更改为“隐藏答案”。同样，如果用户单击“隐藏答案”超链接，则该特定问题的可用答案选项和正确答案选项将被隐藏。简而言之，我希望以下jsFiddle具有与我拥有的HTML完全相同的功能：参考小提琴链接为：http://jsfiddle.net/cjramki/JCVnY/39/light/有没有人知道如何使用jQuery实现这一目标？这将对我有很大的帮助。感谢您花费您宝贵的时间来理解我的问题。等待您的拨弄和答复。我无法使用的jSFiddle是：http : //jsfiddle.net/LbVFc/作为参考，我在HTML代码下面放置了两个问题及其答案（与我提供的js Fiddle相同）：

<div id="body">
    <div class="container-fluid" style="padding-bottom: 50px;">
        <div class="row-fluid">
            <div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
                <div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
                    <ul style="padding: 0;">
                        <li>
                          <div class="list-div">
                            <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a></div>
                            <div style="text-align: left;">                                 
                                Question 1.
                                </div>                          
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                    <div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
                                <br/>
                                Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html><body><p>Current versus time and voltage versus time graph of a circuit element is shown below :<img src="http://www.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.com/upload_media/questions/original/1330939630_49.1.jpg" width="117"></p></body></html>
                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
                                </div>
                <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
              </div>
              <div class="list-div">
                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                      <div class="radio-select">1)</div>
                                        <div class="radio-div">
                                            capacitance of 2 F
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">
                                            capacitance of 1 F
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">
                                            a voltage souice of emf 1V
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>2</div>
                                    </label>            
                                </div>
                            </div>
                        </li>   
                    <li>
                          <div class="list-div">
                            <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a></div>
                            <div style="text-align: left;">                                 
                                Question 2.
                                </div>                          
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                    <div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
                                <br/>
                                Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html><body><p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p></body></html>
                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
                                </div>
                <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
              </div>
              <div class="list-div">
                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                        <div class="radio-select">1)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>1</div>
                                    </label>            
                                </div>
                            </div>
                        </li>           
          </ul>                                     
                </div>
            </div>
        </div>
    </div>
</div>

基兰拉姆昌德拉（Kiranramchandran）

试试这个代码

a添加class 选择期权股利和股利答案

您可以使用此标记和Js

HTML

<div id="body">
    <div class="container-fluid" style="padding-bottom: 50px;">
        <div class="row-fluid">
            <div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
                <div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
                    <ul style="padding: 0;">
                        <li>
                          <div class="list-div">
                            <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a></div>
                            <div style="text-align: left;">                                 
                                Question 1.
                                </div>                          
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                    <div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
                                <br/>
                                Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html><body><p>Current versus time and voltage versus time graph of a circuit element is shown below :<img src="http://www.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.com/upload_media/questions/original/1330939630_49.1.jpg" width="117"></p></body></html>
                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
                                </div>
                <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
              </div>
              <div class="list-div">
                <div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div class='opt' style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                      <div class="radio-select">1)</div>
                                        <div class="radio-div">
                                            capacitance of 2 F
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">
                                            capacitance of 1 F
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">
                                            a voltage souice of emf 1V
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>2</div>
                                    </label>            
                                </div>
                            </div>
                        </li>   
                    <li>
                          <div class="list-div">
                            <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a></div>
                            <div style="text-align: left;">                                 
                                Question 2.
                                </div>                          
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                    <div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
                                <br/>
                                Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html><body><p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p></body></html>
                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
                                </div>
                <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
              </div>
              <div class="list-div">
                <div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div class='opt' style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                        <div class="radio-select">1)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">                    
                                            <img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
                          </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>1</div>
                                    </label>            
                                </div>
                            </div>
                        </li>           
          </ul>                                     
                </div>
            </div>
        </div>
    </div>
</div>


JS

$(document).ready(function () {

$('.opt').hide();

        $('a.show-ans').click(function (e) {
            $(this).parent().next().find('div.opt').toggle();
            if ($(this).text() == "Show Answers") {
                $(this).text('Hide Answers')
            }
            else {
                $(this).text('Show Answers')
            }
            e.preventDefault();
        });

});

此处演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-6

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何在单击相应超链接时隐藏/显示qstn的答案，以及如何使用jQuery动态更改此超链接的文本？

如何在单击相应超链接时隐藏/显示qstn的答案，以及如何使用jQuery动态更改此超链接的文本？

单击时如何在jquery中访问超链接属性

如何获得使用jQuery附加的单击时超链接的ID

如何使用jQuery动态添加超链接？

如何使用JQuery更改超链接颜色？

单击html表内的超链接时，如何避免运行此jQuery代码？

如何在TinyMce中更改超链接文本的颜色

Android：如何在“片段”中将文本更改为超链接

WPF-仅在禁用超链接时如何在超链接上显示工具提示

如何在html中显示特定文本的超链接

如何使用 VBA 代码在超链接中显示所需的文本

如何将文本超链接放置在可单击的div标签中，以便在单击时仅触发超链接

如何使用VBA更改Access超链接？

如何在超链接上使用javascript动态更改SVG模式图像

如何更改超链接的名称？

如何在文本框中添加超链接以及文本

如何在scrapy中提取文本以及超链接文本？

单击超链接时显示 DOM 元素

如何定位超链接JQuery

如何通过单击超链接生成动态URL

如何不将粘贴的超链接显示为超链接？

jQuery-显示超链接文本

如何在SVG中超链接此URL？

jQuery：如何用非超链接文本替换部分原始超链接？

单击超链接时如何调用fullcalendar回调

当我单击超链接时，如何停止Excel？

更改 TextBlock 的 IsEnabled 属性时如何更改超链接的颜色？

如何使多个JQuery弹出，在超链接上单击？

如何在Ruby中正确操作动态超链接？

如何在数据列表中创建动态超链接