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>