查找和匹配来自单独输入的属性

时间：2018-10-18 20:52:20

标签： javascript jquery

当我单击.sub-list单选按钮时，需要获得与.cat-item项上的[data-for]和.sub-list {{ 1}}和fill。

<svg>
<b>
$(document).ready(function() {
  $("input[name='radios']").change(function() {
    if ($(this).prop("checked")) {}
  });
});

2 个答案:

答案 0 :(得分：1)

这很痛苦。

$(document).ready(function() {
  $("input[name='radios']").change(function() {
    // Reset hardcoded styles for previously checked item
    // Just do them all
    allSpans = $("input[name='radios']").siblings('span')
    allSpans.children('b').css('color', 'black')
    allSpans.find('[fill]').css('fill', 'silver')

    // Find cat and color
    list = $(this).closest('.sub-list')
    catName = list.attr('data-for')
    cat = $('.cat-list').find('.cat-item:has([name="' + catName + '"])')

    var color = cat.css('color')
    
    // Set values
    list.find('svg [fill]').css('fill', color)
    $('b', list).css('color', color)
  });
});
.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="cat-dropdown-menu">
      <div class="cat-list" id="category">
        <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
        <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" fill="silver" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" fill="silver" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" fill="silver" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" fill="silver" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>

仅CSS：

.cat1 {
  border: 2px solid blue;
}

.cat2 {
  border: 2px solid red;
}

svg {
  fill: silver;
}

/* This doesn't cascade, previous svg rule is more specific */
.sub-item.cat1 input[name="radios"]:checked+span,
.sub-item.cat1 input[name="radios"]:checked+span svg {
  color: blue;
  fill: blue;
}

.sub-item.cat2 input[name="radios"]:checked+span,
.sub-item.cat2 input[name="radios"]:checked+span svg {
  color: red;
  fill: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-item">
  Main Category:
  <div class="cat-dropdown closed">
    <div class="cat-dropdown-menu">
      <div class="cat-list" id="category">
        <label class="cat-item" style="color:blue">
<input type="radio" name="cat1">Main 1</label>
        <label class="cat-item" style="color:red">
<input type="radio" name="cat2">Main 2</label>
      </div>
    </div>
  </div>
  Sub Category:
  <div class="sub-container">
    <div class="type-list">
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="comp">
<input class="sub-input" id="comp" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br><b>Main 1A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat1">
        <div class="sub-list" data-for="cat1">
          <label class="sub-btn" for="ticket">
<input class="sub-input" id="ticket" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br><b>Main 1B</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="elephant">
<input class="sub-input" id="elephant" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br><b>Main 2A</b></span></label>
        </div>
      </div>
      <div class="sub-item cat2">
        <div class="sub-list" data-for="cat2">
          <label class="sub-btn" for="hook">
<input class="sub-input" id="hook" type="radio" name="radios" />
<span class="sub-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path id="" d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/></svg><br><b>Main 2B</b></span></label>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

更改（单击）无线电时，找到其最接近的标签颜色并将该颜色应用于所需的元素。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".cat-list input[type='radio']").change(function(){
          var
          theGrey = '#ccc',
          theTextColor = $(this).closest('label').css("color"),
          theCat=$(this).val();
          console.log(theCat+theTextColor);
          $('.sub-item').css('border-color', theGrey);
          $('.'+theCat).css('border-color', theTextColor);
          $('b').css('color', '#000');
          $('.'+theCat+' b').css('color', theTextColor);
          $('.sub-icon svg path').css('fill', theGrey);
          $('.'+theCat + ' .sub-icon svg path').css('fill', theTextColor);


});
      })
    </script>
    <style media="screen">
      .cat1 {
        border: 2px solid ;
      }

      .cat2 {
        border: 2px solid ;
      }
      .sub-item{border-color:#ccc; margin-bottom: 5px;}

      .text-color-1{}
      .text-color-2{}
    </style>
    <div class="post-item">
      <form action="">

      Main Category:
      <div class="cat-dropdown closed">
        <div class="cat-dropdown-menu">
            <div class="cat-list" id="category">
              <label class="cat-item" style="color:blue">
                <input type="radio" name="cat" value="cat1">Main 1</label>
              <label class="cat-item" style="color:red">
                <input type="radio" name="cat" value="cat2">Main 2</label>
            </div>

        </div>
      </div>
      Sub Category:
      <div class="sub-container">
        <div class="type-list">
          <div class="sub-item cat1">
            <div class="sub-list" data-for="cat1">
              <label class="sub-btn" for="comp">
                <input class="sub-input" id="comp" type="radio" name="radios"/>
                <span class="sub-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path
                    id=""
                    fill="silver"
                    d="M21.72 16.784a.094.094 0 0 0-.071-.033H3.351a.094.094 0 0 0-.093.108c.003.017.279 1.711 2.421 1.711h13.642c2.142 0 2.418-1.694 2.42-1.711a.095.095 0 0 0-.021-.075zm-7.844 1.193h-2.752v-.633h2.752v.633zM5.252 16.092h14.496c.21 0 .38-.17.38-.38V6.81a.38.38 0 0 0-.38-.38H5.252a.38.38 0 0 0-.38.38v8.904c0 .21.17.38.38.38zM6.2 7.758h12.598v7.006H6.201V7.758z"/></svg><br>
                  <b>Main 1A</b></span></label>
            </div>
          </div>
          <div class="sub-item cat1">
            <div class="sub-list" data-for="cat1">
              <label class="sub-btn" for="ticket">
                <input class="sub-input" id="ticket" type="radio" name="radios"/>
                <span class="sub-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path
                    id=""
                    fill="silver"
                    d="M7.519 14.008l3.473 3.473 6.372-6.372-3.473-3.473-6.372 6.372zm13.884-4.77L19.925 7.76a1.98 1.98 0 0 1-2.686-2.686l-1.477-1.477a.992.992 0 0 0-1.4 0L3.597 14.362a.992.992 0 0 0 0 1.4l1.478 1.478a1.98 1.98 0 0 1 2.685 2.686l1.478 1.477a.993.993 0 0 0 1.4 0l10.765-10.765a.993.993 0 0 0 0-1.4zM10.992 19.07L5.93 14.008l7.962-7.96 5.06 5.061-7.96 7.96z"/></svg><br>
                  <b>Main 1B</b></span></label>
            </div>
          </div>
          <div class="sub-item cat2">
            <div class="sub-list" data-for="cat2">
              <label class="sub-btn" for="elephant">
                <input class="sub-input" id="elephant" type="radio" name="radios"/>
                <span class="sub-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path
                    id=""
                    fill="silver"
                    d="M19.565 9.341h-4.086a4.636 4.636 0 0 1-1.67 3.027.476.476 0 0 1-.672-.067.478.478 0 0 1 .066-.674 3.684 3.684 0 0 0 1.354-2.858 3.7 3.7 0 0 0-3.695-3.695A3.7 3.7 0 0 0 7.188 8.38a3.448 3.448 0 0 0-.86.702c-.826.936-1.008 2.16-1.008 3.053 0 .382.01.765.02 1.135.03 1.11.066 2.493-.3 2.87-.029.029-.115.117-.422.117a.957.957 0 1 0 0 1.914c.74 0 1.343-.234 1.793-.696.6-.617.795-1.505.846-2.513.113.003.234.005.36.005.955 0 2.245-.115 3.266-.627 0 0-.07.442-.07.568v3.807c0 .68.643 1.211 1.325 1.211h.018c.682 0 1.23-.53 1.23-1.21v-1.96h4.544v1.975c0 .672.565 1.195 1.237 1.195h.018c.672 0 1.197-.523 1.197-1.195v-2.182c.598-.3.957-.898.957-1.586v-3.828c0-.99-.783-1.794-1.774-1.794zM7.189 12.107a.451.451 0 1 1 .902 0 .451.451 0 0 1-.902 0z"/></svg><br>
                  <b>Main 2A</b></span></label>
            </div>
          </div>
          <div class="sub-item cat2">
            <div class="sub-list" data-for="cat2">
              <label class="sub-btn" for="hook">
                <input class="sub-input" id="hook" type="radio" name="radios"/>
                <span class="sub-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path
                    id=""
                    fill="silver"
                    d="M13.587 16.6h1.829c-.254 1.303-1.405 2.31-2.772 2.31a2.836 2.836 0 0 1-2.823-2.836v-5.166a.853.853 0 0 0 .25-.611V5.884a.779.779 0 0 0-.776-.793.779.779 0 0 0-.776.793v4.413c0 .246.1.466.25.611v5.166c0 2.115 1.74 3.835 3.854 3.835 2.09 0 3.821-1.717 3.846-3.83l.012-1.97v-1.573L13.587 16.6z"/>
                  </svg>
                  <br>
                  <b>Main 2B</b>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </form>
    </div>

相关问题
最新问题