1

これがこのフォーラムでよくある質問であることは知っていますが、具体的な解決策が見つかりません。

私がやろうとしているのは、チェックボックスの選択に基づいて HTML リンクを動的に表示することです。何が間違っているのかを理解するのに苦労しています。この時点では、コードは何もしていないようです。

以下はコードです。

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="description" content="GIT Courses" />

<title>GIT Courses</title>
<link href="courses3.css" rel="stylesheet" type="text/css">
<!-- We include the jQuery CSS, API, and UI from CDN in the Head -->
<!-- Most browsers have CDN fed libraries already in cache, as they are used very frequently  -->
<!-- This will speed up load times, reduce bandwidth use, and serve from closest geographical servers -->
<!-- Ref: http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery -->
<link
    href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"
    type="text/css" rel="Stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js"
    type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"
    type="text/javascript"></script>

</head>

<body>



    <div id="wrapper">

        <header>

            <div class=" headleft"></div>
            <div class="headright">
                <h1>Graphic Information Technology</h1>
            </div>

            <!-- end header -->
        </header>

        <nav>
            <table class="navigation">
                <thead>

                    <tr>
                        <th><a href="new2.html">home</a></th>
                        <th><a href="courses3.html">courses</a></th>
                        <th><a href="resources.html">resources</a></th>
                        <th><a href="labs.html">lab</a></th>
                    </tr>

                </thead>

            </table>

            <!-- end nav -->
        </nav>

        <!-- Begin HTML elements -->
        <h3>Thank you for your interest in our Developer courses!</h3>
        <p>Please select which campus resources you would like to explore
            more below:</p>
        <!-- Here is a "Field set" Array for the Resource Check Boxes -->
        <!-- We will leave the links out of the labels at this stage -->
        <fieldset id="checkboxArray">
            <legend>ASU Resources</legend>
            <label><input type="checkbox" name="rescheck[]"value="Career Preparation" />Career Preparation</label> 
            <label><input type="checkbox" name="rescheck[]" value="College Advising" />College Advising</label> 
            <label><input type="checkbox" name="rescheck[]"value="Counseling Services" />Counseling Services</label>
            <label><input type="checkbox" name="rescheck[]" value="Financial Aid" /> Financial Aid </label>
            <label><input type="checkbox" name="rescheck[]"value="Fitness &amp; Recreation" /> Fitness & Recreation </label> 
            <label><input type="checkbox" name="rescheck[]" value="Health Services" /> Health Services </label> 
            <label><input type="checkbox" name="rescheck[]"value="Housing" /> Housing </label>
            <label><input type="checkbox"name="rescheck[]" value="Library" /> Library </label>
            <label><input type="checkbox" name="rescheck[]" value="Parking" /> Parking </label> 
            <label><input type="checkbox" name="rescheck[]" value="Scholarships" /> Scholarships </label>
            <label><input type="checkbox" name="rescheck[]" value="Student Employment" /> Student Employment </label>
            <label><input type="checkbox" name="rescheck[]" value="Student Organizations" /> Student Organizations </label> 
            <label><input type="checkbox" name="rescheck[]" value="Tutoring Support" /> Tutoring Support </label>
            <label><input type="checkbox" name="rescheck[]" value="Writing Support" /> Writing Support </label>
        </fieldset>

        <!-- Here we display the resources selected.
     One way (well the only way I know how) is to Toggle visibility of DIVs based on selection. 
     The toggle is done within jQuery, here is the HTML side of it.
     Maybe not the best practice but it works, I never did take any classes on any of this :) -->

        <div class="myResources">
            <p>Here are the links to your selected resources:</p>
            <div  class="resource" resource-label="Career Preparation">
                <a href="https://students.asu.edu/careerguide/careerpreparation">Career
                    Preparation</a>
            </div>
            <div  class="resource" resource-label="College Advising">
                <a href="https://technology.asu.edu/advising">College Advising</a>
            </div>
            <div  class="resource resource-label="Counseling Services">
                <a href="https://students.asu.edu/counseling">Counseling
                    Services</a>
            </div>
            <div  class="resource" resource-label="Financial Aid">
                <a href="https://students.asu.edu/financialaid">Financial Aid</a>
            </div>
            <div  class="resource"
                resource-label="Fitness &amp; Recreation">
                <a href="http://fitness.asu.edu/">Fitness & Recreation</a>
            </div>
            <div  class="resource" resource-label="Health Services">
                <a href="https://students.asu.edu/health">Health Services</a>
            </div>
            <div  class="resource" resource-label="Housing">
                <a href="http://housing.asu.edu/home">Housing</a>
            </div>
            <div  class="resource" resource-label="Library">
                <a href="http://lib.asu.edu/">Library</a>
            </div>
            <div  class="resource" resource-label="Parking">
                <a href="https://cfo.asu.edu/pts">Parking</a>
            </div>
            <div  class="resource" resource-label="Scholarships">
                <a href="https://students.asu.edu/scholarships">Scholarships</a>
            </div>
            <div  class="resource" resource-label="Student Employment">
                <a href="https://students.asu.edu/employment">Student Employment</a>
            </div>
            <div  class="resource" resource-label="Student Organizations">
                <a href="http://asu.orgsync.com/">Student Organizations</a>
            </div>
            <div  class="resource" resource-label="Tutoring Support">
                <a href="https://studentsuccess.asu.edu/">Tutoring Support</a>
            </div>
            <div  class="resource" resource-label="Writing Support">
                <a href="https://studentsuccess.asu.edu/writingcenters">Writing
                    Support</a>
            </div>

            <!-- end of content wrapper -->
        </div>
        <!--  End of HTML Elements -->
        <!--  Suggested best practice is to put all Scripts at the bottom of the page, just before the End of Body Tag -->
        <!--  This is to speed up page loading time -->
        <!--  Ref: http://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer -->
        <!-- jQuery code begins here -->
        <script type="text/javascript">
    // We place all jQuery code inside this "Document Ready" handler to ensure everything loaded completely before running code
    $(document).ready(function() {
        // bind to click function
        $('input[type="checkbox"]').click(function() {
            // test if any are checkboxes in the array are checked
            if ($('input[name="rescheck[]"]:checked').length > 0) {
                // hide all resources until...
                $('.resource >div').hide();
                // we loop checked boxes and show div.
                $("input[name='rescheck[]']:checked").each(function() {
                    $('.resource >div[resource-label=' + this.id + ']').show();
                });
                // hmm... at least that was the idea
                //FIXME: Why didn't this hide?
            } else {
                // none checked - hide all
                $('.resource >div').hide();
            }
        });​​
    }); 
</script>
    </div>
</body>
</html>
4

4 に答える 4

0

チェックボックスが関連するdivと同じ順序である場合は、要素インデックスを参照として使用します。

$('input[name^="rescheck"]').click(function() { // if checkbox clicked
  var index = $(this).parent().index(); // gets parent index since nested in label
  $('.resource:eq(' + index + ')').toggle() // hide or show related div
});

このフィドルをチェックしてください

于 2013-03-19T19:54:52.157 に答える
0

Selector [name ^="value"]で始まる属性を使用する必要があります

$('input[name^="rescheck"]:checked')

コードは次のようになります。-

$('.resource').hide();
$('input[type="checkbox"]').click(function() {
    $("input[name^='rescheck']").each(function() {
        if ($(this).is(":checked"))
            $('div[resource-label="'+this.value+'"]').show();
        else
            $('div[resource-label="'+this.value+'"]').hide();
    });
});

ライブデモを参照

于 2013-03-19T19:37:28.593 に答える
0

HTML にいくつかのエラーがあります。これらが実際のスクリプトのタイプミスなのか、ここでフォーマット中のエラーなのかはわかりませんが、この行を整理する必要があります。

<div  class="resource resource-label="Counseling Services">

resource-label現在、要素クラス属性の一部であることに注意してください。

jQuery のこれらの行に沿って何かを試して、少し簡単にすることができます。 

$('#checkboxArray').on('click', 'input[type="checkbox"]', function(event)
{
    var resources = $('.myResources');

    // Hide all resources
    resources.children('div').hide();

    // Cycle through the checkboxes siblings
    $(this).siblings().each(function(index)
    {
        // If they are checked show the resource
        if ($(this).is(':checked') 
        {
            resources.find('div[resource-label="' + $(this).val() + '"]').show();
        }
    });
}
于 2013-03-19T19:47:02.857 に答える
0

ここで提供されるすべての回答は、賛成票または少数票に値します。ありがとう、私はまだコードをテストする機会がありませんでしたが、例と提案は非常に役に立ちました.

于 2013-03-20T04:31:45.823 に答える