Question

这是关于堆栈溢出的第一个问题 - 所以大家好！

我尝试使用动态下拉菜单在div中显示文字。我设法设置动态下拉菜单，以便根据第一个列表中选择的选项填充第二个列表。

但是我现在想要做的是在这个表格下面的div中显示文本，但是我很难弄清楚如何做到这一点。我通过指定一个名为“隐藏”的类来隐藏当前在div中的文本。使用CSS＆＃34; display：none＆＃34;。

<div class="hide">
<h2>Camden Town Library - Monday</h2>
<p>
  Camden Town Monday opening hours
</p>

.hide {display: none;}

我遇到的问题是使用jQuery删除此类。我知道当选择一个选项时我可能需要使用像removeClass这样的东西（＆＃39; hide＆＃39;）但我不确定如何实际操作。我如何知道选择了哪个选项？

if($(lib).val() == "Camden" && $(day).val() == "Monday") { removeClass('hide') }

我知道我还需要使用数据目标但不知道如何实现它。

到目前为止，我的工作是：http://codepen.io/smifaye/pen/woYWdO

非常感谢任何帮助。

smifaye

Answer 1

以下是您可以使用的更改事件

SELECT
    tblEmployees.EmployeeID,
    (
        SELECT Count(tblEngineersAppts2.DiaryID)
        FROM tblEngineersAppts1
        JOIN tblEngineersAppts2 ON tblEngineersAppts1.ApptID = tblEngineersAppts2.ApptID
        WHERE tblEmployees.EmployeeID = tblEngineersAppts1.EmployeeID
        AND (((Format$([ApptDate],'MM/YY'))='03/17'))
    ) AS CountOfDiaryID
FROM
    tblEmployees

然后在每个div上添加data-day =＆＃34; monday＆＃34;和数据库=＆＃34;坎登＆＃34;它适用于。

您也不需要使用javascript添加选项，请查看我的codepen以查看它是否正常工作和清理。

http://codepen.io/anon/pen/NbOZpo?editors=1111

Answer 2

一个简单的解决方法是使用$day jquery function在change下拉:eq(index)事件中处理它像这样

$day.change(function() {    
    if($library.val() == "Camden" && $day.val() == "Monday") {
      $('.hide').eq( 0 ).removeClass('hide');
    }
});

对于其他库和日期选择执行相同操作，但为每个案例使用正确的索引替换“0”。 查看，选择卡姆登和星期一，然后选择星期二：

$(document).ready(function() {
  $library = $("select[name='lib']");
  $day = $("select[name='day']");

  $library.change(function() {

    if ($(this).val() == "Camden") {
      $("select[name='day'] option").remove();
      $("<option>Select day</option>").appendTo($day);
      $("<option>Monday</option>").appendTo($day);
      $("<option>Tuesday</option>").appendTo($day);
      $("<option>Wednesday</option>").appendTo($day);
      $("<option>Thursday</option>").appendTo($day);
      $("<option>Friday</option>").appendTo($day);
      $("<option>Saturday</option>").appendTo($day);
      $("<option>Sunday</option>").appendTo($day);
    }

    if ($(this).val() == "Holborn") {
      $("select[name='day'] option").remove();
      $("<option>Select day</option>").appendTo($day);
      $("<option>Monday</option>").appendTo($day);
      $("<option>Tuesday</option>").appendTo($day);
      $("<option>Wednesday</option>").appendTo($day);
      $("<option>Thursday</option>").appendTo($day);
      $("<option>Friday</option>").appendTo($day);
      $("<option>Saturday</option>").appendTo($day);
      $("<option>Sunday</option>").appendTo($day);
    }

    if ($(this).val() == "Please select from above") {
      $("select[name='day'] option").remove();
      $("<option>Not applicable</option>").appendTo($day);
    }
  });
  
  
  $day.change(function() {    
    $('.panel>div').addClass('hide');//Hide ALL
    if($library.val() == "Camden" && $day.val() == "Monday") {
      $('.hide').eq( 0 ).removeClass('hide');
    }
    else if($library.val() == "Camden" && $day.val() == "Tuesday") {
      $('.hide').eq( 1 ).removeClass('hide');
    }
  });
});

.hide {
  display: none;
}

.searchbox {
  border: 2px solid #00019F;
  display: inline-block;
  width: 305px;
}

button {
  border: 2px solid #00019F;
  border-radius: 5px;
  background: #CCCCCC;
  color: #00019F;
  width: 150px;
  height: 36px;
}

button:hover, button:focus {
  border: 2px solid #FF9900;
  outline: none;
  background: #EFEFEF;
}

select {
  border: 2px solid #6C6C6C;
  background: white;
  height: 34px;
  width: 280px;
}

select:focus {
  border: 2px solid #FF9900;
  outline: none;
}

@media screen and (max-width:600px) {
  .searchbox {
    width: 260px;
  }
  select {
    width: 235px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.camden.gov.uk/themes/published-themedir/camden-bremen/styles/public.css" rel="stylesheet"/>
<link href="http://www.camden.gov.uk/themes/published-themedir/camden-bremen/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<div id="library" style="padding-bottom:10px;">Select the Library and day from the lists below to see opening hours:</div>
<div class="searchbox">
  <div style="border-bottom-left-radius: 10px; background-color: #00019F;">
    <h3 style="margin: 0px; padding: 10px; color: white;">Library opening hours</h3>
  </div>

  <form>
    <div class="heading" style="padding: 10px;">
      <b>Library:</b>
      <select name="lib">
				<option>Please select</option>
				<option>Camden</option>
				<option>Holborn</option>
			</select>
    </div>
    <div style="padding: 10px;">
      <b>Day of the week:</b>
      <select name="day">
				<option>Please select from above</option>
			</select>
    </div>
  </form>
</div>

<div class="panel">
  <div class="hide">
    <h2>Camden Town Library - Monday</h2>
    <p>
      Camden Town Monday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Tuesday</h2>
    <p>
      Camden Town Tuesday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Wednesday</h2>
    <p>
      Camden Town Wednesday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Thursday</h2>
    <p>
      Camden Town Thursday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Friday</h2>
    <p>
      Camden Town Friday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Saturday</h2>
    <p>
      Camden Town Saturday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Camden Town Library - Sunday</h2>
    <p>
      Camden Town Sunday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Monday</h2>
    <p>
      Holborn Monday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Tuesday</h2>
    <p>
      Holborn Tuesday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Wednesday</h2>
    <p>
      Holborn Wednesday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Thursday</h2>
    <p>
      Holborn Thursday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Friday</h2>
    <p>
      Holborn Friday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Saturday</h2>
    <p>
      Holborn Saturday opening hours
    </p>
  </div>
  <div class="hide">
    <h2>Holborn Library - Sunday</h2>
    <p>
      Holborn Sunday opening hours
    </p>
  </div>
</div>

Answer 3

if($(lib).val() == "Camden" && $(day).val() == "Monday") { $(".anotherName").removeClass("hide") }

<div id="hideIt" class="hide">

或

if($(lib).val() == "Camden" && $(day).val() == "Monday") { $("#hideIt").removeClass("hide") }


div( ng-repeat='cladding in claddings track by $index' ui-sref='app.protected.docInside.cladding({documentId, claddingId: cladding.id})')
   div(ng-if='!cladding.deleteFlag')
       .doc-child-img
       p {{cladding.name}}
       element-dropdown(type='"cladding"')
       .clearfix
   del(ng-if='cladding.deleteFlag',ng-mouseover="cladding.hover=true",ng-class='{myClass:!!cladding.hover}',ng-mouseleave="cladding.hover = false")
       .doc-child-img
       p {{cladding.name}}
       element-dropdown(type='"cladding"')
       .clearfix

Answer 4

您还可以使用jQuery使用toggleClass函数。在这里你可以看到这个例子。

<button type="submit">toggle div</button>
<p>This is the content to be hide.</p>
button{
    background: #d81c1c;
    color: #fff;
    border: 1px solid #d81c1c;
    padding: 6px 15px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.hide{
    display: none;
}

$(document).ready(function(){
    $('button').on('click', function(){
        $('p').toggleClass('hide');
    })
})

这是我的codepen

http://codepen.io/ektad/pen/QGJLda

从div中删除一个类

4 个答案: