问题

Question

问题

更新＃1：澄清

a）我正在尝试这样做，以便当某人点击<p class=rect G1>Male</p>时，他们无法选择女性选项<p class=rect G2>Female</p>，除非再次点击并取消选择其第一个选项。我一直在使用.not（），但它们仍然可以选择。

b）对于种族类别，我希望用户能够选择两个内容，例如“白色”和“黑色”，然后才能进行其他选择。

scripts.js中

// Numbers
var total = 56
var male = 41;
var female = 15;

// Option #1: Gender
$( ".G1" ).click(function() {
    $(".headshot").not(".Female").toggleClass("show");
    $(".number").html(total - female);
});

$( ".G2" ).click(function() {
    $(".Female").toggleClass("show").not(".Male");
    $(".number").html(total - male);
});

的index.html

   <section class="selection">
                <div class="gender">
                    <p class="category">Gender</p>
                    <div class="options">
                        <p class="rect G1">Male</p>
                        <p class="rect G2">Female</p>
                    </div><!-- /.options -->
                </div><!-- /.gender -->

                <div class="age">
                    <p class="category">Age</p>
                    <div class="options">
                        <p class="rect A1">Under 35</p>
                        <p class="rect A2">36-64</p>
                        <p class="rect A3">65+</p>
                    </div><!-- /.options -->
                </div><!-- /.age -->

                <div class="ethnicity">
                    <p class="category">Ethnicity<span>*<span></p>
                    <div class="options">
                        <p class="rect E1">White</p>
                        <p class="rect E2">Black</p>
                        <p class="rect E3">Aboriginal</p>
                        <p class="rect E4">Metis</p>
                        <p class="rect E5">Asian</p>
                    </div><!-- /.options -->
                </div><!-- /.ethnicity -->
            </section>

            <img src="assets/img/headshots/wiebe.jpg" alt="" class="headshot NDP Male White">
            <img src="assets/img/headshots/wight.jpg" alt="" class="headshot NDP Female White">
            <img src="assets/img/headshots/wishart.jpg" alt="" class="headshot PC Male White">

chart.scss

.Male, .Female,
.Low, .Middle, .High,
.White, .Black, .Aboriginal, .Metis, .Asian  {
    @include transitions;
    opacity: 0.5;
}

// Toggle class for when MLAs selected
.show {
    @include transitions;
    opacity: 1;
}

Answer 1

not仅限制选择，这意味着您必须在toggleClass来电之前使用它。

换句话说，您的代码应为：

$(".Female").not(".Male").toggleClass("show");

...虽然你的“.Female”元素也是“.Male”似乎很奇怪......也许你应该完全删除not(".Male")位？此外，在您提供的HTML中，任何元素上都没有“男性”或“女性”类。仅仅因为元素中有“男性”字样就不会使他们有一类“男性”;要做到这一点，您需要向元素添加类class="Male"等类属性（或者在您的情况下，<p class="rect G1 Male">Male</p>。

此外，jQuery附带show和hide方法，您可以使用这些方法代替toggleClass("show")。

最后，您的代码引用了total变量，但在您包含的代码中没有提及它。

修改

总结一下，你想要的是这样的HTML：

<p class="rect G1 male">Male</p> <p class="rect G2 female">Female</p>

然后（例如）禁用“女性”div，你会使用一些jQuery，如：

var $femaleDiv = $('.female'); // select the div with class "female" $femaleDiv.prop('disabled', 'disabled'); // add a disabled property

或缩短它：

$('.female').prop('disabled', 'disabled');

但是，这不适用于<div>，因为它们不是表单控件。所以，让我们假装你实际上在这些div中有单选按钮，换句话说让我们假装你的HTML是：

<p class="rect G1 male">Male <input type="radio"/></p> <p class="rect G2 female">Female <input type="radio"/></p>

然后您可以使用以下代码禁用输入（几乎与以前相同）：

var $femaleRadio = $('.female :input'); // select the radio in the "female" div $femaleRadio.prop('disabled', 'disabled'); // add a disabled property

或缩短它：

$('.female :input').prop('disabled', 'disabled');

Answer 2

您的问题是您的jQuery中的类不会反映您的HTML类。

将女性和男性添加到HTML：

  <p class="rect G1 male">Male</p>
  <p class="rect G2 female">Female</p>

并删除不：

$('.g1' ).click(function() {
    $('.g2').toggleClass("show");

    $(".number").html(total - female);
});

$('.g2').click(function() {
    $('.g1').toggleClass("show");
    $(".number").html(total - male);
});

单击后，使用.not（）限制选项时遇到问题

问题

更新＃1：澄清

scripts.js中

的index.html

chart.scss

2 个答案: