Question

您好，免责声明：我有学习障碍，请先抱歉。

我必须做一个jquery分配，我们在其中生产产品，然后选择通过复选框过滤产品。现在，我遵循了在课程中学到的所有内容，并尝试应用它，但是它拒绝过滤...

export default class UserData extends Component {
  render() {
    const {data} = this.props
    console.log(data)
    const userImage = imageLink + data["user_id"] + "?.jpeg"
    return (
      <div className="UserDisplay">
        <table style={{width: "100%"}}>
          <tr>
            <td id="userImage"><img src={userImage} alt="User Avatar"></img></td>
          </tr>
        </table>
      </div>
    )
  }
}

$('.fruit').hide();
$('#fruitCheck').click(function() {
   if ($(this).is(':checked')) {
       $('.fruit').show();
   } else {
       $('.fruit').hide()
   }
};

ul
{
    list-style-type: none;
}
div ul li
{
    margin: 5px;
    float: left;
}    
img
{
    
}
.fruit p
{
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: green;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}

.frisdrank p
{	
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: red;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}

.dier p
{  	
	float: left;
	position: absolute;
	margin-top: -15px;
	margin-left: 20px;
	background-color: yellow;
	font-size:10px;
	padding-left:20px;
	padding-right:20px;
	opacity: 0.8;
}

现在看起来像这样：https://i.imgur.com/p1PctA3.png

提琴：https://jsfiddle.net/97nd3t81/

PS。我知道现在只有1个复选框，我打算在第一个复选框工作后复制粘贴它们。

Answer 1

更新了您的JSfiddle，选中here。

$('.fruit').hide();
$('#fruitcheck').click(function() {
   if ($(this).is(':checked')) {
       $('.fruit').show();
   } else {
       $('.fruit').hide()
   }
});

在.click函数末尾，只有一个括号是缺少的东西。您可以找到.click函数文档here。

Answer 2

更改

<label for="fruitCheck">
    <input type="checkbox" id="fruitcheck"  />
    Fruit
</label>

到

<input id='fruitcheck' type='checkbox' /><lable for='fruitcheck'>Fruit</label>

然后您可以做：

var fruits = $('.fruit'), fruitcheck = $('#fruitcheck'); 
fruitcheck.prop('checked', false); fruit.hide();
fruitcheck.click(function(){
  if(fruitcheck.is(':checked')) {
    fruits.show();
  } 
  else{
    fruits.hide();
  }
});

搜索结果无法正确过滤[jquery]

2 个答案: