jqueryで、クリックしたら他の属性にclass追加

###やりたいこと
ある場所をクリックしたら、他の要素にclassを追加したい

###試したこと
以下コードでは効きませんでした。

html
1<div id="sample">
2  <ul class="nav">
3   <li class="step1"><p>step1</p></li> //ここにclassを追加したい
4   <li class="step2"><p>step2</p></li>
5  </ul>
6</div>
7
8<div id="question" class="fit">
9  <p>下記のいずれかをクリック</p>
10  <ul class="flexbox">//liのどれかをクリックで上のclass.stepに".active"を追加したい
11    <li><a class="btn trans1" data-value="りんご" onclick="sample(this)">りんご</a></li>
12    <li><a class="btn trans2" data-value="みかん"　onclick="sample(this)">みかん</a></li>
13    <li><a class="btn trans3" data-value="もも"　onclick="sample(this)">もも</a></li>
14  </ul>
15</div>

js
1$('#question>ul>li').click(function(){
2    $('.step1').addClass('active');
3})
4
5function sample(elem) {
6     product = $(elem).data('value');
7};
8
9$(function () {
10    $(".btn").on("click", function () {
11        $(this).closest("div").css("display", "none");
12        id = $(this).attr("href");
13        $(id).addClass("fit").show("slow");
14    });
15});

css
1#sample{
2  margin-top: 90px;
3}

上記コードでは効きませんでした。
jsの$(要素)の部分を色々と修正してみましたが、どれもだめでした。
とてもシンプルなのでこれ以上どこを直せば良いかわからず質問させていただきました。

以上、宜しくお願い致します。

kei344

2020/06/15 05:03

関数「sample」のコードを提示してください。

begginer_class

2020/06/15 05:05

sampleはcssの指定だけです。

kei344

2020/06/15 05:51

そこの挙動しだいなので提示してください、と書いています。

begginer_class

2020/06/15 05:55

cssの記述内容も影響するとは、無知でした。追記しました。

kei344

2020/06/15 05:57

関数の話をしています。「 onclick="sample(this)"」これの「sample」は関数といって事前に定義されているはずのものです。

begginer_class

2020/06/15 06:04

随分前に書いたものだったのでこの存在を忘れておりました；；追記しました。

yambejp

2020/06/15 08:13

jQueryを利用するならタグ自体にonclickなどを設定するのはなるべくやめた方がいいいでしょう

begginer_class

2020/06/15 08:35

onclickが問題なのではないかと思ってはいるのですが、js側で受け取るのにaタグにはvalue属性がないからと以前こちらで教えていただいた方法となります。。

行動規範の内容に同意します

回答3件

jQueryの記述を以下に変更したところできました。

js
1$(function () {
2    $(".flexbox>li>a").on("click", function () {
3        $(".step1").addClass("active");
4    });
5});
6

投稿2020/06/15 08:55

begginer_class

総合スコア14

.activeの css class が定義されていないことが原因で、activeのclassを追加が行われても見た目が変わらないという可能性もある気がします。
その場合は<head>要素の中に<style>.active { background-color:red; }</style>などを追加すると見た目が変わるようになります。

投稿2020/06/15 07:55

ku__ra__ge

総合スコア4524

begginer_class

2020/06/15 07:57

開発ツールを見ても追加自体されていませんでした。 ※他のJSは動いています

行動規範の内容に同意します

ベストアンサー

動くサンプル：https://jsfiddle.net/1m0oqyke/

提示のコードで動くため、下記の3点を確認してください。
0. jQueryが読み込まれている
0. jQueryの読み込みより後に提示のJavaScriptコードが読み込まれている
0. 提示されたHTMLより後に提示のJavaScriptコードが読み込まれているか、$(function(){/* ここ */}); 内にコードを書いている

投稿2020/06/15 06:37

kei344

総合スコア69606