Question

当我单击“添加过滤器”按钮时，如何从选定的选项中获取文本或从输入字段中获取值并创建html元素（div），并将其附加到.selected-filters div中。这是jsfieddle https://jsfiddle.net/bn4m9pyu/17/。我想添加诸如Author is Authorone，Author不是Authortwo之类的内容，或来自Author之类的输入值包含[input value]

<ul class="filters">
  <li class="submenu">
    <div class="filter">
      <span>Author</span>
    </div>
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="is" name="author" checked="checked"/>
          <label for="is">Is</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="isnot" name="author" checked="checked"/>
          <label for="isnot">Is not</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="contains" name="author" checked="checked"/>
          <label for="contains">Contains</label>
          <div class="searchFilter">
            <input type="text" />
          </div>
        </div>
      </form>
      <div class="addFilter">
        Add Filter
      </div>
    </div>
  </li>
  <li class="submenu">
    <div class="filter">
      <span>Author</span>
    </div>
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="is" name="author" checked="checked"/>
          <label for="is">Is</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="isnot" name="author" checked="checked"/>
          <label for="isnot">Is not</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="contains" name="author" checked="checked"/>
          <label for="contains">Contains</label>
          <div class="searchFilter">
            <input type="text" />
          </div>
        </div>
      </form>
      <div class="addFilter">
        Add Filter
      </div>
    </div>
  </li>
</ul>

<div class="selected-filters">
  Selected filters goes here
</div>

Answer 1

您可以使用jquery来实现。

 1. Use the selector to find the selected radio button
 2. Find the parent for that radio button
 3. From there you can find the associated author

如果您为此目的组织了HTML，则可以采用一种更简洁的方法来解决此问题。

$('.submenu .filter').on('click', function() {
  $(this).parent().find('.details').toggleClass('open');
});


$('.addFilter').on('click', function() {
  var radio = $(this).parent().find('input[type=radio]:checked');
  var label = $("label[for='" + $(radio).attr('id') + "']");
  var author = $(radio).parent().find('.searchFilter > input, .selectpicker').eq(0).val();
  var element = $(`<p>Author ${label.text()} ${author}</p>`);
  
  $('.selected-filter').append(element);
});

li {
  cursor: pointer;
  list-style-type: none;
  background: darkred;
  padding: 5px;
  margin-bottom: 10px;
}

.details {
  display: none;
}

.open {
  display: block;
  background: white;
  padding: 20px;
}
.filter-option {
  margin-bottom: 20px;
}

.addFilter {
  background: white;
  border: 1px solid darkred;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  margin-top: 50px;
  cursor: pointer;
  color: darkred;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li class="submenu">
    <div class="filter">
      <span>Author</span>
    </div>
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="is_1" name="author" checked="checked"/>
          <label for="is_1">Is</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="isnot_1" name="author" checked="checked"/>
          <label for="isnot_1">Is not</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="contains_1" name="author" checked="checked"/>
          <label for="contains_1">Contains</label>
          <div class="searchFilter">
            <input type="text" />
          </div>
        </div>
      </form>
      <div class="addFilter">
        Add Filter
      </div>
    </div>
  </li>
  <li class="submenu">
    <div class="filter">
      <span>Author</span>
    </div>
    <div class="details">
      <form>
        <div class="filter-option">
          <input type="radio" id="is" name="author" checked="checked"/>
          <label for="is">Is</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="isnot" name="author" checked="checked"/>
          <label for="isnot">Is not</label>
          <div class="searchFilter">
            <select class="selectpicker">
              <option value="authorone">Author one</option>
              <option value="authortwo">Author two</option>
              <option value="authorthree">Author three</option>
            </select>
          </div>
        </div> 
        <div class="filter-option">
          <input type="radio" id="contains" name="author" checked="checked"/>
          <label for="contains">Contains</label>
          <div class="searchFilter">
            <input type="text" />
          </div>
        </div>
      </form>
      <div class="addFilter">
        Add Filter
      </div>
    </div>
  </li>
</ul>

<div class="selected-filter">
  Selected filters goe
</div>

创建按钮搜索过滤器

1 个答案: