常連

回答者

ベストアンサー

有名人

### 前提・実現したいこと

カラーミーで通販サイトの商品ページをカスタマイズしています。
・現状
サムネイルをクリックするとメインイメージ写真が入れ替わるのみ

・こう変えたい
上記に加えて、メインイメージ写真をクリックした時にも、サムネイルがメインイメージ写真の場所に表示されるようにしたい

・条件
サムネイルは商品ごとに写真枚数が違う
メインイメージをクリックするどんどん隣のサムネイルがメインイメージの場所に表示され、最後まで行くと最初に戻るループにしたい

### 該当のソースコード

```html
<div class="container-section product-image col-md-12 col-lg-7 col">
        <div class="product-image-main" style="height: 440px;">
        <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="mainImage" style="max-height: 440px; display: block;"></div>
                  <div class="product-image-thumb grid_row">
            <ul>
               <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
                <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o1.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
                <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o2.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
                                                              <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o3.jpg?cmsp_timestamp=20200619112104" class="thumb thumb-active" style="max-height: 101.219px;">
                </li>
                                                              <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o4.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
                <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o5.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
                                                              <li class="col-lg-3 col" style="height: 101.219px;">
                  <img src="//img17.shop-pro.jp/PA01168/080/product/151826293_o6.jpg?cmsp_timestamp=20200619112104" class="thumb" style="max-height: 101.219px;">
                </li>
　　　　　　　　</ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
          </div>
　　　　</div>
```
### 該当のソースコード
```css
.thumb {
  max-width: 100%;
  width: auto;
  height: auto;
  border: 1px solid #dbdbdb;
}
.thumb-active {
  border: 1px solid <{$current_color}>;
}
```


```javaScript

    $('img.thumb').click(function(){

      $(this).parent().siblings().children().removeClass('thumb-active');

      var selectedSrc = $(.thumb).attr('src');
      $('img.mainImage').stop().fadeOut(300,
        function(){
          $('img.mainImage').attr('src', selectedSrc);
          $('img.mainImage').fadeIn(300);
        }
      );

      $(this).addClass('thumb-active');

    });
});
```		
```javaScript

    $('img.thumb').click(function(){

      $(this).parent().siblings().children().removeClass('thumb-active');

      var selectedSrc = $(.thumb).attr('src');
      $('img.mainImage').stop().fadeOut(300,
        function(){
          $('img.mainImage').attr('src', selectedSrc);
          $('img.mainImage').fadeIn(300);
        }
      );

      $(this).addClass('thumb-active');

    });	
    $('img.mainImage').click(function(){

      $(this).parent().siblings().children().removeClass('thumb-active');

      var selectedSrct = $('img.thumb').next().attr('src');
      $('img.mainImage').stop().fadeOut(300,
        function(){
          $('img.mainImage').attr('src', selectedSrct);
          $('img.mainImage').fadeIn(300);
        }
      )

      $(this).addClass('thumb-active');
			 });		
  });
```
### 試したこと

jsのコード追加（ $('img.mainImage').click(function(){以降を追加しています）

selectedSrctという変数を作って、thumbのsrcをクリックするごとに取得するようにし、
mainImageをクリックした際に、その変数が発動してメインイメージの場所に表示されるようにしたいのですが、、、
今のままだと、クリックをするごとに、サムネイルを反映しないママのメインイメージがただフェードイン アウトを繰り返すだけになっています。
クリックするごとに隣のサムネイル のsrcを取得させるには、どのようにすればよろしいでしょうか。

画像をクリックすると次の画像に遷移するjquery（通販サイト商品詳細画面）

### 実現したいこと

現在Access(2007-2016)で勤怠管理のデータベースを作成しており、フォームで社員ごとに勤怠情報のレコードを表示させています。Accessフォーム上のDCount関数,DSum関数について分からない点があり、質問させていただきます。

フォーム右上に、フォームに表示しているレコードの数と、その勤務時間合計を表示する部分を作りたいのですが、「フォーム表示中のレコードのみ計算対象にする」という処理の仕方を教えていただけないでしょうか。

![イメージ説明](e59e867c9f9e7db2705a1cbed08fc183.jpeg)
例）上の画像の場合、Bさんの総レコード数は6なので、出勤回数は「6」と表示される
![イメージ説明](f7e8371ed4139fdc71c1b9a982a5f5a1.jpeg)
例）「今月データのみ表示」ボタンを押して9月のレコードのみ表示させたとき、9月のレコード数は3なので、この場合は出勤回数「3」と表示されるようにしたい

・レコードソース名：T_勤怠
・ヘッダー左のテキストボックス名：「Txt_氏名」
・右上の出勤回数のテキストボックス：=DCount("*","T_勤怠","[氏名]=" & [Txt_氏名])

現在このようになっています。検索力不足もありGoogleで解決方法を見つけられなかったので、ヒントになるWebサイトを教えていただけるだけでも有難いです。お力添えよろしくお願いします…！

Access：フォームで表示中のレコードのみを計算対象にする

Excel VBA で テスト受験者のグループ分けを行いたいです。

約10～20人程度のテスト受験者に対して、3回のグループ分けを行いたいです。
例えば16人をグループ分けする場合、
1回目　8人2グループ
2回目　4人4グループ
3回目　3人5グループ（1人余るので1グループのみ4人）
のような感じです。
難しいところは、「1回目で被った受験者とは2回目、3回目はできるだけ当たらないようにしたい」
ことです。

[やったこと]　上記の16人をグループ分けする場合

Excelファイルに、以下のようなデータを用意しておきます。

インデックス番号　　氏名
1　　　　　　　　　 テスト1
2　　　　　　　　　 テスト2
3　　　　　　　　　 テスト3
・　　　　　　　　　　　・
・　　　　　　　　　　　・
・　　　　　　　　　　　・
16　　　　　　　　　テスト16

VBAで、option base 1 を宣言しておき、
①配列Aにインデックス番号を代入します。インデックス番号の最大値は、グループ分けしたい受験者数です。（A[1] = 1 , A[2] = 2 ・・・・A[16] = 16 みたいな感じ）
②配列Aの中身をシャッフルします。
 （A[1] = 6 , A[2] = 2 ・・・・A[16] = 11 みたいな感じ）
③ A[1]からA[8] をグループA　、　A[9]からA[16] をグループBとして1回目のグループ分けが完了。

ここまでコード化できたのですが、2回目以降のグループ分けで、「1回目で被った受験者とは2回目、3回目はできるだけ当たらないようにしたい」というアルゴリズムが考え付きません。
どのような考え方で実現できそうでしょうか。
よろしくお願い致します。


【背景】
テスト受験者のグループ分けを毎回手作業でやっておりました。
方法などはなく、「ただ何となくこれでメンバーが被らず分散されているのではないか」という程度の精度です。（最大人数でも20人なので、目でみて確認しておりました）
しかし、やはりミスや精度に不安がある、加えて何よりも時間がかかるという理由があり、Excel VBAで作れないかとなりました。


【要件について追記】
質問の仕方が慣れておらず申し訳ありません。
要件について以下を追記させて頂きます。

・10人～20人程度で受験者の人数は変化します。（但し、1回目～3回目のグループ分けの間に受験者が変化することはありません。）

・グループ分けの回数は必ず2回以上3回未満です。

・1グループの人数は変化することもあります。
　●受験者12人 1回目3人4グループ 2回目4人3グループ
　でグループ分けすることもあれば、
　●受験者18人 1回目2人9グループ 2回目2人9グループ 3回目3人6グループ 
　で分けることもあります。

・2回目のグループ分けでは、1回目のメンバーとできるだけ被らないように。
　3回目のグループ分けでは、1回目、2回目のメンバーとできるだけ被らないようにしたい。

・「できるだけ被らない」というのは、「被りがどうしようもない」場合は被ることを許可する
　というのが理想ですが・・・まさにこの部分のアルゴリズムが考え付きもしません。

・Excel VBA で実現したく思っております。素人目ですが数式では難しいのではと考えております。
　（Excel VBA は Excel VBA エキスパートの資格をもっている程度の知識ですが、実務で簡単なマクロなどは作成しております。VBA以外のプログラミング知識はありません。）



要件の記載が足りず申し訳ございませんでした。