Jquery 滑动切换和追加不起作用

Question

我好像没弄对。我的语法关闭了吗？我似乎无法理解 jQuery。警报有效，但不适用于这些。我需要做些什么来适应这些吗？我需要做什么才能确保它们正常运行

$(document).ready(function() {
  $('#button1').click(function() {
    ('p').addClass('.red');
  });

  $('#button2').click(function() {
    $('img').slideToggle;
  });
  
  $()
});

body * {
  outline: 1px dotted palevioletred;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  width: 1024px;
  min-height: 700px;
}

.row {
  border-bottom: 3px solid black;
}

.click {
  display: inline-block;
  width: 200px;
  text-align: center;
  vertical-align: center;
  margin-bottom: 30px;
}

.content {
  display: inline-block;
  text-align: center;
  width: auto;
  margin: 25px;
}

button {
  height: 35px;
  width: 75px;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  color: blue;
}

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<div class="container">
  <div class="top_row">
    <div class="top_left click">
      <button id="button1">Add Class</button>
    </div>
    <div class="top_right content">
      <h1>Add Class</h1>
      <p class="blue">Click the button to add class 'red' to this paragraph.</p>
    </div>
  </div>
  <div class="middle_row">
    <div class="middle_left click">
      <button id="button2">Sidetoggle</button>
    </div>
    <div class="middle_right content">
      <h1>SideToggle</h1>
      <p>Click the button to slidetoggle a hidden image.</p>
      <img src="bayBridge.jpg">
    </div>
  </div>
  <div class="bottom_row">
    <div class="bottom_left click">
      <button id="button3">Append</button>
    </div>
    <div class="bottom_right content">
      <h1>Append</h1>
      <p>Click the button to append a new paragraph.</p>
    </div>
  </div>
</div>

Answer 1

此处错误:('p').addClass('.red');

如果要全选<p>标签的语法是:$('p') (参见文档 HERE)

如果要使用addClass添加类，可以看文档HERE你只需要添加你的CSS类，不需要使用. (用于 class 的选择器，如 $('.className') )

所以改变('p').addClass('.red');至 $('p').addClass('red');和你所有的<p>如果你点击你的按钮将是红色的

$(document).ready(function() {
  $('#button1').click(function() {
    $('p').addClass('red');
  });

  $('#button2').click(function() {
    $('img').slideToggle;
  });
  
  $()
});

body * {
  outline: 1px dotted palevioletred;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  width: 1024px;
  min-height: 700px;
}

.row {
  border-bottom: 3px solid black;
}

.click {
  display: inline-block;
  width: 200px;
  text-align: center;
  vertical-align: center;
  margin-bottom: 30px;
}

.content {
  display: inline-block;
  text-align: center;
  width: auto;
  margin: 25px;
}

button {
  height: 35px;
  width: 75px;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  color: blue;
}

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<div class="container">
  <div class="top_row">
    <div class="top_left click">
      <button id="button1">Add Class</button>
    </div>
    <div class="top_right content">
      <h1>Add Class</h1>
      <p class="blue">Click the button to add class 'red' to this paragraph.</p>
    </div>
  </div>
  <div class="middle_row">
    <div class="middle_left click">
      <button id="button2">Sidetoggle</button>
    </div>
    <div class="middle_right content">
      <h1>SideToggle</h1>
      <p>Click the button to slidetoggle a hidden image.</p>
      <img src="bayBridge.jpg">
    </div>
  </div>
  <div class="bottom_row">
    <div class="bottom_left click">
      <button id="button3">Append</button>
    </div>
    <div class="bottom_right content">
      <h1>Append</h1>
      <p>Click the button to append a new paragraph.</p>
    </div>
  </div>
</div>