0

これを使用して、ラジオ ボタンをクリックしたときに複数のコンテンツを表示しています。そして中身が見えない。しかし、ti 値を 1,2 3, 4, 6, 7, 8 に変更すると、正常に動作します。私は何が間違っているのですか？

var options = $('#options').find('input');

    options.click(function(){
    $('#deafaultBottom').hide();
      var id = "opt" + $(this).val();
      $(".optDivs").hide();
      $("#" + id).show();

    });

これは私のhtml構造です

<div id="options">
        <div class="opt1"><input type="radio" name="primary" value="color" /></div>
        <div class="opt2"><input type="radio" name="primary" value="dry" /></div>
        <div class="opt3"><input type="radio" name="primary" value="damaged" /></div>
        <div class="opt4"><input type="radio" name="primary" value="thinning" /></div>
    </div>

<div class="holderOne">
        <div id="opt1" class="optDivs" style="display:none;"><img src="images/bigBottom1.png" /></div>
        <div id="opt2" class="optDivs" style="display:none;"><img src="images/bigBottom2.png" /></div>
        <div id="opt3" class="optDivs" style="display:none;"><img src="images/bigBottom3.png" /></div>
        <div id="opt4" class="optDivs" style="display:none;"><img src="images/bigBottom4.png" /></div>
    </div>
4

3 に答える 3

0

これを試して：

var options = $('#options').find('input');
    options.click(function(){
      $('#deafaultBottom').hide();
      $(".optDivs").hide();
      $("#" + $($(this).parent()).attr('class') ).show();
    });
于 2013-04-03T15:23:26.393 に答える
0

私はお勧めします：

var options = $('#options').find('input');

options.click(function () {
    // I have no idea what element you're affecting here
    $('#deafaultBottom').hide();
    // using the class-name of the parent div element
    var ref = this.parentNode.className;
    // hiding all divs within the .holderOne element
    $('.holderOne div').hide();
    // showing the element that has the same id as the
    // parent's class-name
    $('#' + ref).show();
});

JS フィドルのデモ。

これは、表示する要素がの親要素idのクラス名と一致する属性を持っているという事実を利用しています。radiodiv

親div要素には複数のクラスがある可能性があるため、正規表現を使用して、文字列で始まりopt数字が続くクラス名を識別できます。

var options = $('#options').find('input');

options.click(function () {
    $('#deafaultBottom').hide();
    var ref = this
    .parentNode
    // matches the first instance in which the string 'opt' is followed by
    // a, or a sequence of, number(s).
    .className.match(/\b(opt\d+)\b/)[0];
    console.log(ref);
    $('.holderOne div').hide();
    $('#' + ref).show();
});

JS フィドルのデモ。

于 2013-04-03T15:36:44.727 に答える
0

問題は、値が 'color'、'dry'、'damaged' ad 'thinning' であるのに、所有者 ID が opt1、opt2、opt3、opt4 であることです。あなたがしたいことは、オプションに「1」、「2」、「3」、「4」を入れて、ユーザーに見せたいもののためにそれらの横にテキストを入れることです。提案された変更を加えたコードは次のとおりです。

<div id="options">
    <div class="opt1"><input type="radio" name="primary" value="1" />color</div>
    <div class="opt2"><input type="radio" name="primary" value="2" />dry</div>
    <div class="opt3"><input type="radio" name="primary" value="3" />damaged</div>
    <div class="opt4"><input type="radio" name="primary" value="4" />thinning</div>
</div>

<div class="holderOne">
    <div id="opt1" class="optDivs" style="display:none;"><img src="images/bigBottom1.png" /></div>
    <div id="opt2" class="optDivs" style="display:none;"><img src="images/bigBottom2.png" /></div>
    <div id="opt3" class="optDivs" style="display:none;"><img src="images/bigBottom3.png" /></div>
    <div id="opt4" class="optDivs" style="display:none;"><img src="images/bigBottom4.png" /></div>
</div>

コードが機能している jsFiddleと、正しく切り替えられていることを示すために div (1,2,3,4) にテキストが追加されています。

于 2013-04-03T14:59:21.293 に答える