jvascriptとjQueryを合わせて書く方法

Question

javascriptのonClikで関数を実行し、続けてjQueryも実行したいです。
jvascriptとjQueryを、合わせて記載するにはどうすればよいでしょうか。
よろしくお願いいたします。

function items(i,n) {

	document.getElementById("selected_item").innerHTML=i;
	document.trial.goods.value=n;
}

この後に続けたい処理

$(function(){
$('p#item_name').hide().fadeIn();//一度隠してからフェードインする
});

以下のような処理にしたいが動きません。クリックイベントで２つを実行するにはどうすればいいでしょうか。

<script>
function items(i,n) {

	document.getElementById("selected_item").innerHTML=i;
	document.trial.goods.value=n;

$(function(){
$('p#item_name').hide().fadeIn();
});

}

</script>

htmlは以下です

<a href="javascript:void(0)" onclick="items('hoge','hoge')">テキスト</a>

Comments

[kei344]

HTMLも提示ください。

Answer 1

ご提示のコード（3つ目）
動きますよ。
どうなったら「やりたいことができた」正解なのかが分からないですが。。
$(function(){});はそこに書くなら（なくてもいいという意味で）不要かなとは思いますが。
.hide().fadeIn()は隠したいのか表示したいのか何がしたいのか分かりません。

Answer 2

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

---

動きますが、提示のHTML「だけ」しかない場合は要素が足りないので動かないかもしれません。

<a href="javascript:void(0)" onclick="items('hoge','hoge')">テキスト</a>
<div id="selected_item"></div>
<form name="trial">
  <input type="text" name="goods">
</form>
<p id="item_name">p#item_name</p>

Comments

[natlpush]

ありがとうございます。サンプルのサイトで自分のHTMLを入れてみると動きました。ワードプレスを使っていると動かないので、別の問題かもしれません。

[natlpush]

続けて失礼します。
いろいろといじっていたら、動くようになりました。
HTMLの問題だったかもしれませんが、詳細が不明です。
お手数をおかけしました。

Answer 3

$(function(){

$('p#item_name').hide().fadeIn();
});

これは読み込み時の初期動作を指定する処理なので

$('p#item_name').hide().fadeIn();

だけにしてみてはいかがでしょうか？

Answer 4

続けて書いたらいいと思います。が、作った側が気持ち悪いかどうかだと思います。
気持ち悪いならば別の js ファイルにしてしまうのが良いと思います。

3つめのスクリプトが追加されたので、回答も追記しますと、$(function() {}) はコンテンツがロードされた際のイベントを書くための物で、items() が既に呼ばれているのであればこのイベントは発生しません。中身を items の中に出して下さい。